javascript - 如何在内容可编辑的插入符号处输入字符？

Question

如何使用 JQuery 或纯 JavaScript 输入一个字符，就好像它已经键入一样？

我有一个contenteditable部分，并且正在拦截用户输入以替换某些字符（例如用卷曲的直引号）。我有以下 JQuery 来截取一个字符，但不确定输入新字符的最佳方式。

$('.editor').keypress(function(e) {
    console.log(e.which);
    if (e.which === 39) {
        e.preventDefault();
        // replace with curly quotes
    }
});

Answer 1

document.execCommand 怎么样：

$('.editor').keypress(function(e) {
  console.log(e.which);
  if (e.which === 39) {
    e.preventDefault();
    document.execCommand('insertHTML', false, 'String To Insert');
  }
});

insertHTML 在 IE 中不起作用，因此请使用：

document.selection.createRange().pasteHTML('html to insert');

可以在以下位置找到命令和示例列表： https ://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

---

PS 我认为 e.which 将在某些浏览器中报告 0 ，因此请执行以下操作：

var code = e.keyCode || e.which;

Answer 2

你可以做

$('.editor').keypress(function(e) {
    console.log(e.which);
    if (e.which === 39) {
        e.preventDefault();
        $(this).text(function(index, text){
            return text.replace(/"/gi, '-'); // <--Change this to replace the " with what you need.
        });
    }
});