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>

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

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>

Answer 2

我会使用jQuery。

这是未经测试的代码，但这样的事情可能有用。

// 1. Give all input fields a class of all_inputs.
// 2. The following code should loop through each one and add the ID to the all_ids array.

var all_ids = [];
$('.all_inputs').each(function() {
   var elem = $(this);
   all_ids.push($(this).attr('id'));
});

Answer 3

$(document).on("keypress", "input", function (event) {
    var intKeyCode = parseInt(event.keyCode ? event.keyCode : event.which);
    if (intKeyCode === 13)
    {
        alert("Input Id : " + $(this).attr("id") + "  Input Value : " + $(this).val());
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

如何使用JavaScript检测接收输入的输入字段？

3 个答案: