4

「keydown」イベントを使用して、入力テキスト ボックスに入力された特定の文字を置き換えています。

私が使用する場合：

document.getElementById('inputText').onkeydown = handleInputTextKeydown;

または同等の JQuery:

$('#inputText').on('keydown',handleInputTextKeydown);

期待どおりの結果が得られます。たとえば、Shift+i キーを押すと「í」と表示されます。

ただし、キーダウン フックとして addEventListner を使用すると、次のようになります。

var tb = document.getElementById('inputText');
tb.addEventListener('keydown', handleInputTextKeydown, false);

入力テキスト ボックスには、私の代替文字 (í) と 'I' (大文字の i) 'íI' の両方が表示されます。

addEventListener メソッドが 2 つの「onkeydown」フックと異なるのはなぜですか?

私のテスト ブラウザは IE 11 です。

ところで：別のstackoverflow投稿にあったキーダウンテキスト置換メソッドのバリアントを使用しています：

newKey = keyMap[keyPressed];                // Look for this key in our list of accented key shortcuts
    if (newKey === undefined) {
            return true;                        // Not in our list, let it bubble up as is
        } else {

        var oldValue, start, end;
        oldValue = this.value;                  // Insert the updated key into the correct position within the edit textbox.
        if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
            start = this.selectionStart;
            end = this.selectionEnd;
            this.value = oldValue.slice(0, start) + newKey + oldValue.slice(end);
        }
                                                // Move the caret
        this.selectionStart = this.selectionEnd = start + 1;
        return false;
4

1 に答える 1

6

.addEventListener()バージョン でデフォルトの動作を防止する必要があるためです。

デフォルトの動作を防ぐためにハンドラーの最後で false を返すことは、jQuery 固有の機能であり、.onkeydownプロパティの機能ですが、 で動作するものではありません.addEventListener('keydown')。

e.preventDefault()(最新のブラウザーの場合) を呼び出すか、e.returnValue = false(非標準のブラウザーの場合) を設定する必要があります。

これは問題を解決するために必要な量ではありませんが、プレーンな JavaScript で作業する場合、次のように false を返すことができるクロス ブラウザー イベント処理スタブを使用します。

// refined add event cross browser
function addEvent(elem, event, fn) {
    // allow the passing of an element id string instead of the DOM elem
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // normalize the target of the event
        window.event.target = window.event.srcElement;
        // make sure the event is passed to the fn also so that works the same too
        // set the this pointer same as addEventListener when fn is called
        var ret = fn.call(elem, window.event);   
        // support an optional return false to be cancel propagation and prevent default handling
        // like jQuery does
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}
于 2013-10-26T17:40:47.380 に答える