Detecting input change in jQuery?

by

UPDATED for clarification and example

examples: http://jsfiddle.net/pxfunc/5kpeJ/

Method 1. input event

In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.

In jQuery do that like this

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

starting with jQuery 1.7, replace bind with on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Method 2. keyup event

For older browsers use the keyup event (this will fire once a key on the keyboard has been released, this event can give a sort of false positive because when “w” is released the input value is changed and the keyup event fires, but also when the “shift” key is released the keyup event fires but no change has been made to the input.). Also this method doesn’t fire if the user right-clicks and pastes from the context menu:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Method 3. Timer (setInterval or setTimeout)

To get around the limitations of keyup you can set a timer to periodically check the value of the input to determine a change in value. You can use setInterval or setTimeout to do this timer check. See the marked answer on this SO question: jQuery textbox change event or see the fiddle for a working example using focus and blur events to start and stop the timer for a specific input field

More Related Contents:

  1. PLEASE assist me.. RE: *FORM FIELDS* I want to Hide() my "type=text box" until the Other option is chosen in the dropdown option
  2. How to hide css and js version details from weppalyzer in PHP
  3. Dynamically adding div on button click and changing Id of each?
  4. How to make page loaders/animations/transitions
  5. How do I pass a URL as a parameter? [closed]
  6. Get specific text from html tag jquery [duplicate]
  7. How to change the image while sharing the content to the social networks? [duplicate]
  8. .index() only for one instance of class [closed]
  9. Dynamic page load can’t load Java with page
  10. ReferenceError: event is not defined error in Firefox
  11. How do I link a JavaScript file to a HTML file?
  12. jQuery : simulating a click on a doesn’t work in Firefox? [duplicate]
  13. Changing the selected option of an HTML Select element
  14. “Mixed content blocked” when running an HTTP AJAX operation in an HTTPS page
  15. jQuery UI accordion that keeps multiple sections open?
  16. Vanilla JavaScript equivalent of jQuery’s $.ready() – how to call a function when the page/DOM is ready for it [duplicate]
  17. Chrome Extension how to send data from content script to popup.html
  18. jQuery: Why use document.ready if external JS at bottom of page?
  19. Using jQuery how to get click coordinates on the target element
  20. How to prevent page from reloading after form submit – JQuery
  21. How to change active class while click to another link in bootstrap use jquery?
  22. How to get the html of a div on another page with jQuery ajax?
  23. Waiting for dynamically loaded script
  24. Jquery click event not firing on the element created dynamically using jquery
  25. Calculate Position of selected text javascript/JQuery?
  26. Adding onClick event dynamically using jQuery
  27. How do I refresh a DIV content?
  28. Get content of span
  29. Fire oninput event with jQuery
  30. canvas- Cropping images in different shapes

Leave a Comment