Let's say I have an input field with an id of code ( #code ).

How can I tell when a new character has been typed in it with javascript or jQuery ?

This is when the text is manually being entered or is done by javascript / jQuery.

Let's say I have an input field with an id of code ( #code ).

How can I tell when a new character has been typed in it with javascript or jQuery ?

This is when the text is manually being entered or is done by javascript / jQuery.

• javascript
• jquery

Share Follow edited Apr 13, 2013 at 2:55 Lewis 5,87966 gold badges3333 silver badges4141 bronze badges asked Apr 13, 2013 at 2:27 IrfanMIrfanM 72533 gold badges1010 silver badges2121 bronze badges 1

• possible duplicate of Detecting a keypress within a form? – mauris Commented Apr 13, 2013 at 2:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Use Change function to track any changes in the textbox input. Change event will be triggered only if you focus out of the text box

$('#idoftextbox').change(function(){
    //do something
});

If you want to detect as the user enters something then you need to use KeyPress

$('#idoftextbox').keypress(function(event) {
  if ( event.which == 13 )  { //This will give you the key code
     event.preventDefault();
   }
});

This will trigger on every keypress.

Using Javascript:

document.getElementById('id').addEventListener('input',function(e){
        console.log("Print Hello World");
         //do something else
        });

Edit

In modern browsers only, you can use the "input" event. The change event will probably help you in most cases for all browsers and jQuery and JS examples are defined below. As mentioned the change event will only fire on an input losing focus so you'd have to use a bination of techniques to cover all bases, including checking the field value at given intervals. A thorough explanation that covers all scenarios can be found on SO here: Detecting input change in jQuery?

jQuery:

 $('#code').on('change', function(e){
    //do something 
    });

Javascript

document.getElementById('code').addEventListener('change', function(e){
//do something
});