execCommandでテキストを挿入すると重複の問題が発生します

Question

私はキーボードショートカットを使用して任意のテキストフィールドにポーランド文字を挿入するFirefox拡張機能を開発中です。 Facebook、Draft.js、および任意のReact contentEditable DIVを除いて、すべてのテキストフィールドで機能します。再現する

ステップ：

1. ロードhttp://facebook.github.io/draft-js/
2. Chromeを開き、開発ツール
3. 入力キャレットが開発ツールのコンソールでdocument.execCommand("insertHTML", false, "X");を実行
存在するようにDraft.js入力ボックスを選択します

期待される結果： X is入力ボックスに追加

実際の結果： Xが入力ボックスに2回追加されました。インスタンスの1つを削除することはできますが、もう1つは削除できませんが選択可能です。

注：Draft.js入力に少なくとも1文字入力すると、コマンドは正常に動作します。

Answer 1

私はそれを理解しました。 document.execCommand("insertHTML", false, "X");を実行する前に、<span data-text="true"></span>の長さが0であることを確認してください。そうであれば、insertHTML execCommandとVoila！に続いてdocument.execCommand("undo", false);を実行してください。できます！ここで

コードです：

if (document.querySelectorAll('span[data-text="true"]').length === 0) { 
    document.execCommand("insertHTML", false, "X"); 
    document.execCommand("undo", false); 
} else { 
    document.execCommand("insertHTML", false, "X"); 
} 

それはあなたの最初の文字を入力したかどうかをチェックします。そうした場合は、execCommandを取り消して余分なXを取り除きます。elseは、一度文字が入力されるとエキストラを挿入しないので、insertHTMLになります。