Get id of active textfield

Question

If I have 4 text boxes in my form, at any point can I get id of text field in which user is filling the information at the moment.

Eg. in following context, I should be able to get id of textbox 3.

Thanks

Answer 1

You can get the currently active element using document.activeElement , so its ID using document.activeElement.id .

Focus on any of the textboxes in the snippet to see how it works:

 setInterval(function() { console.log("Active element: " + document.activeElement.id); },1000); 

 <input type="text" name="" id="1"> <br> <input type="text" name="" id="2"> <br> <input type="text" name="" id="3"> <br> <input type="text" name="" id="4"> 

Answer 2

You can use getAttribute() like the following way:

 function myFunc(thatText){ console.log(thatText.getAttribute('id')); } 

 <div> <input type="text" id="txt1" onchange="myFunc(this)" placeholder="1"/><br/> <input type="text" id="txt2" onchange="myFunc(this)" placeholder="2"/><br/> <input type="text" id="txt3" onchange="myFunc(this)" placeholder="3"/><br/> <input type="text" id="txt4" onchange="myFunc(this)" placeholder="4"/> </div> 

Answer 3

There can be an onkeyup function. pass this from the DOM and in js use that argument to get id

 function getElem(elem) { console.log(elem.id) } 

 <input type="text" name="test" id="1" onkeyup="getElem(this)"> <br> <input type="text" name="test" id="2" onkeyup="getElem(this)"> <br> <input type="text" name="test" id="3" onkeyup="getElem(this)"> <br> <input type="text" name="test" id="4" onkeyup="getElem(this)">