在contentEditable中觸發ENTER事件

Question

我有一個contenteditable div，並且想要在某些按鍵（如D）被按下時觸發'enter'。下面的代碼不起作用......

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

我只關心瀏覽器。

編輯：我想補充一點，每次按D鍵時，它都會在用戶可以繼續在新的div /新行中鍵入的情況下在contenteditable內創建一個新元素'div'。例如：

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

編輯：我想我的主要問題是，有沒有辦法觸發一個CONTENTEDITABLE元素的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 - 尼科伯恩斯的回答）

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