You can bind to multiple events by separating them with a space:
$(":input").on("keyup change", function(e) {
// do stuff!
})
docs here.
Answer from keeganwatkins on Stack OverflowYou can bind to multiple events by separating them with a space:
$(":input").on("keyup change", function(e) {
// do stuff!
})
docs here.
If you're ever dynamically generating page content or loading content through AJAX, the following example is really the way you should go:
- It prevents double binding in the case where the script is loaded more than once, such as in an AJAX request.
- The bind lives on the
bodyof the document, so regardless of what elements are added, moved, removed and re-added, all descendants ofbodymatching the selector specified will retain proper binding.
The Code:
// Define the element we wish to bind to.
var bind_to = ':input';
// Prevent double-binding.
$(document.body).off('change', bind_to);
// Bind the event to all body descendants matching the "bind_to" selector.
$(document.body).on('change keyup', bind_to, function(event) {
alert('something happened!');
});
Please notice! I'm making use of $.on() and $.off() rather than other methods for several reasons:
$.live()and$.die()are deprecated and have been omitted from more recent versions of jQuery.- I'd either need to define a separate function (therefore cluttering up the global scope,) and pass the function to both
$.change()and$.keyup()separately, or pass the same function declaration to each function called; Duplicating logic... Which is absolutely unacceptable. - If elements are ever added to the DOM,
$.bind()does not dynamically bind to elements as they are created. Therefore if you bind to:inputand then add an input to the DOM, that bind method is not attached to the new input. You'd then need to explicitly un-bind and then re-bind to all elements in the DOM (otherwise you'll end up with binds being duplicated). This process would need to be repeated each time an input was added to the DOM.
They are almost the same thing. In jQuery or JavaScript, I would have to recommend the change() event. The reason you should not use keyup() is because if a user inputs a value using autofill, it will not fire the keyup() event. However, autofill does fire the change() event, and your verification script will run, and the input will be verified.
NOTE: Normally, change() is fired when the element loses focus. If you want to check data after every key press, you could combine keyup() and change(), which would allow you to parse the data on both events. This is the best of both worlds in my opinion.
Hope this helps!
Use keyup with debouncing, it's more user friendly.
keyup
Whenever you release a key.
The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type. -- http://api.jquery.com/change/
change
Whenever the content of that field changes, generally, it happens when you remove focus from that field, but not only that.
The change event is sent to an element when its value changes. This event is limited to input elements, textarea boxes and select elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus. -- http://api.jquery.com/change/
Use keyup and a debounced callback So that you verification process isn't fired after each key stroke, but only if the user stops typing, check this example: http://codepen.io/desandro/full/JDugF, open the page, open the javascript console, and start scrolling.
You can use $.on() function and attach multiples handlers.
$("#element").on('keyup change', function (){
// Your stuff...
});
You can use only "input" event if you don't need to provide support for the older browsers. It will be fired everytime a value changes in the input element. Here's a list of the supported browsers: https://developer.mozilla.org/en-US/docs/Web/Events/input
