Question

我有一个令人满意的div，并希望触发一个＆＃39;输入＆＃39;当按下某些键（如D）时。下面的代码不起作用......

＆＃13;

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

＆＃13;

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

＆＃13;

我只关心Chrome。

编辑：我想补充说，每次按下D键时，它都会创建一个新元素＆＃39; div＆＃39; div在contenteditable里面，用户可以继续输入新的div / new行。例如：

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

编辑：我想我的主要问题是，是否无法在一个满足的元素中触发ENTER ???

Answer 1

希望这能让你更接近你想要做的事情：

// 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>

Answer 2

怎么样：

（范围部分来自here - Nico Burns的回答）

  $('#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
     }
});

在contentEditable中触发ENTER事件

2 个答案: