addEventListener('keydown'，handlekeydown，false)与.onkeydown的工作方式不同，用于替换键入的击键 [英] addEventListener('keydown',handlekeydown,false) vs. .onkeydown working differently for replacing typed keystroke

问题描述

我正在使用'keydown'事件来替换在输入文本框中键入的特定字符.

I am using a 'keydown' event to replace specific characters typed in an input textbox.

当我使用时:

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

或等效的JQuery:

or the JQuery equivalent:

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

我得到了预期的结果-例如Shift + i键显示为í".

I get the expected result - e.g. the keypress Shift+i displays as 'í'.

但是，如果我使用addEventListner作为keydown钩子:

However if I use addEventListner as the keydown hook:

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

输入文本框同时显示我的替代字符(í)和'I'(大写i)'íI'.

the input textbox displays both my substitute character (í) and 'I' (uppercase i) 'íI'.

为什么addEventListener方法不同于两个"onkeydown"钩子?

Why does the addEventListener method differ from the two 'onkeydown' hooks?

我的测试浏览器是IE 11.

My test browser is IE 11.

顺便说一句:我正在使用另一种stackoverflow帖子中的keydown文本替换方法的变体:

BTW: I am using a variant of the keydown text replace method that was in another stackoverflow post:

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;

推荐答案

因为您必须防止.addEventListener()版本的默认行为.

Because you have to prevent the default behavior with the .addEventListener() version.

在处理程序的末尾返回false以防止默认行为是jQuery特定功能和.onkeydown属性的功能，但不是与.addEventListener('keydown')一起使用的功能.

Returning false at the end of the handler to prevent the default behavior is a jQuery-specific feature and a feature of the .onkeydown property, but not something that works with .addEventListener('keydown').

您将需要调用e.preventDefault()(对于现代浏览器)或设置e.returnValue = false(对于非标准浏览器).

You will need to call e.preventDefault() (for modern browsers) or set e.returnValue = false (for non-standard browsers).

这不仅仅是解决问题所需要的，但是在使用纯JavaScript时，我使用跨浏览器事件处理存根，使我可以像这样返回false:

This is more than you need to solve your problem, but when working in plain javascript, I use a cross browser event handling stub that allows me to return false like this:

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

这篇关于addEventListener('keydown'，handlekeydown，false)与.onkeydown的工作方式不同，用于替换键入的击键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！