javascript - 如何使用 JavaScript 检测哪个输入字段接收到输入？

Question

我有以下 HTML 代码:

<div>
    <input id="input1" type="text" size="50" autofocus autocomplete="on">
</div>
<div>
    <input id="input2" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input3" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input4" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input5" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input6" type="text" size="50" autocomplete="on">
</div>

现在，当用户在任何输入字段中键入内容然后按 Enter 时，我需要识别哪个输入字段接收了输入，然后将该输入的 ID 存储在 var 中，并将键入的内容存储到另一个变量中。到目前为止，我有这个代码，我用它来识别是否按下了 Enter:

window.onload = function() {
    searchinput = document.getElementById("input1");
    if(!!searchinput) {
        searchinput.addEventListener("keypress", function(a) {
            var key = a.keyCode;
            if(key == 13) {
                var query = this.value;
                search(query);
            }
        });
    }
 };

但正如您所看到的，它仅适用于特定的输入字段(示例中的 input1)，并且不会插入元素 ID 的任何位置。

Answer 1

您可以使用 onkeypress 事件来检测用户按键，并使用 e.wich 来检查按下的按键是否等于代码 13(输入键)，然后使用 this 从当前输入中获取所需的属性，请查看下面的示例。

希望这有帮助。

<小时/>

document.onkeypress = function(e){
    if(e.which==13){ //click on enter key
        alert(e.target.id+'---'+e.target.value); // get the id and value of current input
    }
}

<div>
    <input id="input1" type="text" size="50" autofocus autocomplete="on">
</div>
<div>
    <input id="input2" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input3" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input4" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input5" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input6" type="text" size="50" autocomplete="on">
</div>