Question

这是我在JSFiddle上的代码 - http://jsfiddle.net/zoqtmahq

HTML：

<h2>JavaScript Capture Keyboard Input</h2>
<h3>keydown event</h3>

Type: charCode : keyCode <br>

<textarea rows="10" cols="20" data-roll="none"></textarea><br>

<h3>keypress event</h3>

Type: charCode : keyCode <br>

<textarea rows="10" cols="20" data-roll="none"></textarea><br>

<input type="button" value="Clear"/>

JS：

function clearEvent() {
    document.getElementsByTagName('textarea')[0].value = "";
    document.getElementsByTagName('textarea')[1].value = "";
}

function logEvent(event) {
    event.preventDefault();
    document.getElementsByTagName('textarea')[0].value += event.type + " " + event.charCode + " " + event.keyCode +  "\r\n";
    document.getElementsByTagName('textarea')[1].value += event.type + " " + String.fromCharCode(event.charCode) + " " + event.keyCode +  "\r\n";
}

document.addEventListener('keydown', logEvent, false);
document.addEventListener('keypress', logEvent, false);

document.getElementsByTagName("input")[0].addEventListener("click", clearEvent, false);

我正在努力捕捉＆＃34; keydown＆＃34;和＆＃34;按键＆＃34;文档对象上任何位置的事件。所以我已经将2个事件添加为文档对象的监听器。它们都由同一个logEvent处理程序处理。此处理程序在2个不同的＆＃34; textareas＆＃34;中记录事件类型以及事件的一些其他属性。

我希望它会捕获＆＃34; keydown＆＃34;第一个textarea中的事件，以及＆＃34; keypress＆＃34;第二个事件。然而它所做的只是捕获＆＃34; keydown＆＃34;两个地区的活动。

Answer 1

防止默认值使其无法触发它。评论它并观察两个事件都被触发。

＆＃13;

function clearEvent() {
    document.getElementsByTagName('textarea')[0].value = "";
    document.getElementsByTagName('textarea')[1].value = "";
}

function logEvent(event) {
    //event.preventDefault();
    document.getElementsByTagName('textarea')[0].value += event.type + " " + event.charCode + " " + event.keyCode +  "\r\n";
    document.getElementsByTagName('textarea')[1].value += event.type + " " + String.fromCharCode(event.charCode) + " " + event.keyCode +  "\r\n";
}

document.addEventListener('keydown', logEvent, false);
document.addEventListener('keypress', logEvent, false);

document.getElementsByTagName("input")[0].addEventListener("click", clearEvent, false);

＆＃13;

<h2>JavaScript Capture Keyboard Input</h2>
<h3>keydown event</h3>

Type: charCode : keyCode <br>

<textarea rows="10" cols="20" data-roll="none"></textarea><br>

<h3>keypress event</h3>

Type: charCode : keyCode <br>

<textarea rows="10" cols="20" data-roll="none"></textarea><br>

<input type="button" value="Clear"/>

＆＃13;

Answer 2

评论以下内容：

// event.preventDefault();

简化示例位于JSFidd le位置：

无法在JavaScript中同时捕获keydown和keypress事件

2 个答案: