Javascript::編集可能な div に挿入された文字 (または文字列) を識別するにはどうすればよいですか?

Question

編集可能なdivに挿入された文字を識別する方法を知りたいです...ユーザーが単一引用符または二重引用符を入力したかどうかを確認し、この引用符に特定のクラスを引用符の後のテキストに与えたいと考えています...それはオンキーのプロパティまたはリターンだと思います...わからない...

誰かヒントを持っていますか？

Answer 1

の keypress イベントは、入力された文字に関する情報を収集できる唯一のイベントであるため、必要なものです。見積もりの​​場合は、キー入力を自分で処理できます。を挿入するコード <span> CSS クラスの使用についてはここでは説明しません。サポートが必要な場合は別の質問をするか、おそらくドキュメントを読むことをお勧めします。 DOM 範囲, テキスト範囲 そして選択 IEで そして 他のブラウザ.

function handleKeypress(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (charStr == "'" || charStr == '"') {
        // Code to insert quote character followed by <span> with CSS class
        // goes here.

        // Prevent the default action
        if (evt.preventDefault) {
            evt.preventDefault();
        } else {
            evt.returnValue = false;
        }
    }
}

var div = document.getElementById("your_div");
if (div.addEventListener) {
    div.addEventListener("keypress", handleKeypress, false);
} else if (div.attachEvent) {
    div.attachEvent("onkeypress", handleKeypress);
}

Answer 2

あなたがやろうとしていることを完全に理解しているかどうかはわかりませんが、contentEditable 属性を使用してユーザー入力を div にキャプチャしたいようです。私が使っていたら ムーツール そして ファイアバグ 私なら次のことから始めます::

$('idOfEditableDiv').addEvent('keydown', function(event) {
    console.log(event.key);
    });

これにより、コンテンツ編集可能な div 内で押されたキーが Firebug コンソールに出力されます。したがって、「a」キーを押すと、「a」が出力されます。これは、Caps Lock キーなどの明らかな値を持たない入力をキャプチャしたい場合に便利です。イベント全体をログに記録する console.log(event) さらに有益な情報を得ることができます。

キャプチャしたいキー (a キーと b キーなど) を特定したら、次の操作を行います。

$('idOfEditableDiv').addEvent('keydown', function(event) {
    if(event.key == 'a' || event.key == 'b') {
        //do stuff here if the a or b key was pressed
        }
    });

a キーが押された場合は何かを実行し、b キーが押された場合は別のことを実行したい場合があります。その場合は、次の手順を実行します。

$('idOfEditableDiv').addEvent('keydown', function(event) {
    if(event.key == 'a') {
        //do stuff here if the a key was pressed
        }
    else if(event.key == 'b') {
        //do stuff here if the b key was pressed
        }
    });

Mootools に詳しくない場合は、次のようにすべての Mootools コードを domReady イベントでラップする必要があります。

window.addEvent('domready', function() {
    $('idOfEditableDiv').addEvent('keydown', function(event) {
        if(event.key == 'a') {
            //do stuff here if the a key was pressed
            }
        else if(event.key == 'b') {
            //do stuff here if the b key was pressed
            }
        });
    });

Mootools イベントの詳細情報