3

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.

Lewis
  • 5,769
  • 6
  • 30
  • 40
IrfanM
  • 715
  • 3
  • 10
  • 21
  • possible duplicate of [Detecting a keypress within a form?](http://stackoverflow.com/questions/14592059/detecting-a-keypress-within-a-form) – mauris Apr 13 '13 at 02:36

3 Answers3

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();
   }
});
PSL
  • 123,204
  • 21
  • 253
  • 243
  • what is better using .on() or .change()? – IrfanM Apr 13 '13 at 02:34
  • You would generally use on if you want to bind more events to the element. Have a look at this documentation http://api.jquery.com/on/. But both serve the same purpose. – PSL Apr 13 '13 at 02:36
  • Thank you, i've been wondering what is the difference for some time now. – IrfanM Apr 13 '13 at 02:45
  • @IrfanM I answered regarding onChange first and you voted for the other answer.. :( – PSL Apr 13 '13 at 02:58
  • StackOverflow says he answered 39 minutes ago and you 41 minutes ago. I'm sorry, but I gave it to the first answer. – IrfanM Apr 13 '13 at 03:11
  • 41 minutes ago is earlier than 39 minutes.. :) But that's ok... I Just mentioned thats it.. – PSL Apr 13 '13 at 03:18
1

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 combination 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
});
Community
  • 1
  • 1
Lewis
  • 5,769
  • 6
  • 30
  • 40
  • what is better using .on() or .change()? – IrfanM Apr 13 '13 at 02:34
  • .change is just a shortcut. – Lewis Apr 13 '13 at 02:38
  • 2
    the 'change' event only triggers after the input box loses focus. If you want to check the moment a key is pressed you'd have to use 'keydown', but that also wouldn't detect when it's changed via javascript – redbmk Apr 13 '13 at 02:59
  • Amended answer to reflect that the change event only fires on losing focus and linked to existing SO post detailing techniques to cover all bases – Lewis Apr 13 '13 at 03:08
1

This will trigger on every keypress.

Using Javascript:

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