Как изменить contenteditable ввода символа, при нажатии клавиш

Question

У меня есть содержание редактируемой DIV и я хочу изменить введенный символ при выстреле нажатии клавиши событие:

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="div" contenteditable> 
 
Hi I am a div 
 
</div>

Почему это не работает?

Answer 1

Для добавления символа в contenteditable вы должны получить положение курсора и вставить его в том же положении.

Вы можете попробовать код ниже. Этот код предлагают по @Tim_Down здесь: Changing the keypress и Need to set cursor position to the end of a contentEditable div, issue with selection and range objects

с этим вы можете сделать карту ключей для добавления каждого события вы хотите на ключ обожженного.

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; 
 
    } 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="div" contenteditable> 
 
Hi I am a div 
 
</div>