Trigger ENTER event in contentEditable

Question

I have a contenteditable div and would like to trigger an 'enter' when certain keys (like D) are pressed. Below code doesn't work...

$('#div_edit').keydown(function(e) {
    if(e.keyCode == 68) {
        var k = jQuery.Event('keypress', { which: 13 });
        $('#div_edit').trigger(k);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div_edit" contenteditable="true"></div>

I'm only concerned about Chrome.

EDIT: I would like to add that everytime the D key is pushed, it creates a new element 'div' inside the contenteditable where the user can continue typing in the new div/new line. Example:

<div id="div_edit" contenteditable="true">
    <div>The start of the sentence</div>
    <div>user hit D so continue typing here</div>
</div>

EDIT: I guess my main question is, is there no way to trigger an ENTER in a contenteditable element???

score 1 · Accepted Answer · answered Jul 03 '15 at 20:08

Hope this brings you closer to what you are trying to do:

// function from http://stackoverflow.com/questions/4834793/set-caret-position-right-after-the-inserted-element-in-a-contenteditable-div/4836809#4836809
function insertNodeAtCaret(node) {
  if (typeof window.getSelection != "undefined") {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var range = sel.getRangeAt(0);
      range.collapse(false);
      range.insertNode(node);
      range = range.cloneRange();
      range.selectNodeContents(node);
      range.collapse(false);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
    var html = (node.nodeType == 1) ? node.outerHTML : node.data;
    var id = "marker_" + ("" + Math.random()).slice(2);
    html += '<span id="' + id + '"></span>';
    var textRange = document.selection.createRange();
    textRange.collapse(false);
    textRange.pasteHTML(html);
    var markerSpan = document.getElementById(id);
    textRange.moveToElementText(markerSpan);
    textRange.select();
    markerSpan.parentNode.removeChild(markerSpan);
  }
}
$('#div_edit').keydown(function(e) {
  if (e.keyCode == 68) {
    insertNodeAtCaret(document.createElement("br"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div_edit" contenteditable="true"></div>

your code creates a new element like it should, but on every keypress of D it creates yet another element inside of the first element.
(changed to 'div' from br). How would I get it to just create a
after text typed in div_edit and move carat there to continue? Hence: `
previous text
continue here
` — kko, Jul 03 '15 at 20:37

score 0 · Answer 2 · edited May 23 '17 at 11:58

What about :

(Range part is from here- Nico Burns's answer)

  $('#div_edit').keydown(function(e) {
      if(e.keyCode == 68) {
        var br = document.createElement("br");
        var div_edit = document.getElementById("div_edit");
        div_edit.appendChild(br);

        var range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(div_edit);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        var selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
     }
});

this code works somewhat, especially if I specified to append a div or p, but my main problem is trying to get the carat/cursor inside the newly created element. — kko, Jul 03 '15 at 20:23

Trigger ENTER event in contentEditable

2 Answers2