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

Question

I have the following HTML code:

<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>

Now, when a user types something in any input field and then press enter, I need to recognize which one received the input, then store that input's ID in a var and the typed content into another. So far I have this code which I use to recognize if enter has been pressed:

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

But as you can see, it only works with a specific input field (input1 in the example), and it doesn't insert anywhere the element's ID.

Answer 1

You can use onkeypress event to detect user key press and e.wich to check if the pressed key is code equal 13 (enter key), then get attribute you want from current input using this , check example below.

Hope this helps.

---

 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

I would use jQuery .

This is untested code, but something like this might work.

// 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>