Javascript addEventListener(';keydown';,handlekeydown,false)与..onkeydown在替换键入的击键时的工作方式不同
我正在使用“keydown”事件替换输入文本框中键入的特定字符 当我使用:Javascript addEventListener(';keydown';,handlekeydown,false)与..onkeydown在替换键入的击键时的工作方式不同,javascript,jquery,addeventlistener,keydown,onkeydown,Javascript,Jquery,Addeventlistener,Keydown,Onkeydown,我正在使用“keydown”事件替换输入文本框中键入的特定字符 当我使用: document.getElementById('inputText').onkeydown = handleInputTextKeydown; 或者JQuery的等价物: $('#inputText').on('keydown',handleInputTextKeydown); 我得到了预期的结果-例如,按键Shift+I显示为'í' 但是,如果我使用addEventListner作为向下键挂钩: var tb =
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方法与两个“onkeydown”挂钩不同
我的测试浏览器是IE11
顺便说一句:我正在使用另一个stackoverflow帖子中的keydown文本替换方法的变体:
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()
版本的默认行为
在处理程序末尾返回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);
}
}