javascript - contenteditableのキャレットに文字を入力するには?

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