如何在按键上更改contenteditable输入字符

我有一个内容可编辑的div，我想在按键事件触发时修改输入字符：

$('#div').on('keypress', function (e) { e.preventDefault(); $(e.target).trigger(jQuery.Event('keypress', { which: e.which + 1728 })); }); 

  
 Hi I am a div  

为什么这不起作用？

Answer 1

要在contenteditable中添加字符，必须获取光标位置并粘贴到相同位置。

您可以尝试以下代码。 此代码由@Tim_Down提出： 更改按键和需要将光标位置设置到contentEditable div的末尾，与选择和范围对象一起发出问题

使用此function，您可以制作一个地图键，用于在键击时添加所需的每个事件。

 var greekChars = { "a": "\u03b1" // Add character mappings here }; function convertCharToGreek(charStr) { return greekChars[charStr] || "[stack]"; } function insertTextAtCursor(text) { var sel, range, textNode; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); textNode = document.createTextNode(text); range.insertNode(textNode); // Move caret to the end of the newly inserted text node range.setStart(textNode, textNode.length); range.setEnd(textNode, textNode.length); sel.removeAllRanges(); sel.addRange(range); } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); range.pasteHTML(text); } } var div = document.getElementById("div"); div.onkeypress = function(evt) { evt = evt || window.event; var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which; if (charCode) { var charStr = String.fromCharCode(charCode); var greek = convertCharToGreek(charStr); insertTextAtCursor(greek); return false; } } 

  
 Hi I am a div