jQuery keyUp on Page Load - javascript

I have a input element that has a keyup event, any number greater than will show a div.
This works if a human types into the textfield. However, how do I achieve the keyup on page load if I am setting the value via JS?
<input id="this_field">
JS on page load:
$('#this_field').val('4'); //Now I want the keyup to be event to be triggered.
I know I can wrap the keyup in a function and call it right after setting the value, however is there a way to trigger the keyup?

$('#this_field').val('4').trigger('keyup');
or just :
$('#this_field').val('4').keyup();
jQuery keyup() function API

Make use of $(document).Ready() and trigger() of jquery .
$(document).ready(function($) {
$('#this_field').val('4').trigger('keyup');
});

Related

Jquery stop change event on manual trigger

I have bound a change event on "select box" which call when user changes select box value manually. But I want to stop change event call when we trigger change event by javascript like $(element).trigger('change').
Please help
use the off function to remove an event listener.
$(element).off('change')
Trigger method have another parameter (extraParameter ) and put your data. In handler check extraParameter to findout it is manually or with javascript code.
$(element).trigger('change',{'isTriggeredBySystem':true})
jQuery trigger

jQuery on change event not triggered by jQuery itself?

I placed a listener on all checkboxes on my page with .on('change'). When clicking on a checkbox it actually detects the change and fires a function. BUT, when I use a jQuery function to set a checkbox to checked like so: $('#checkboxOne').prop('checked', true) the .on('change') doesn't detect a change? How come?
Kartikeya Khosla is right
The 'change' event is only fired when a user triggers it. Setting properties from within your own code will not trigger events.
If you want to fire jquery function it self, then you should write your function in $(document).ready(function(){ });

How to use "input propertychange" events to capture just copy and paste by mouse

I want to capture change happened in textarea (keyup, and also copy&past), for keyup option i use :
$("textarea").keyup(function(){
// ajax call here
});
i added this to capture pasting or cutting by mouse then trigger keyup event on the textarea:
$("textarea").on('input propertychange', function() {
$(this).trigger(keyup);
});
the problem here is if i press a key in my keyboard , i get 2 ajax calls because the second function capture also keyup event.
Is there a way to prevent $("textarea").on('input propertychange'... from detecting a press key ?
Why not test this simplification? As I tested your code, without success on detecting keyup in 'input propertychange' event.
You ignore keyup event:
//$("textarea").keyup(function(){
//// ajax call here
//});
And capture only this (do ajax call with this):
$("textarea").on('input propertychange', function() {
//$(this).trigger(keyup);
// do ajax call here
});
the latter ignores only some control keys, ie, key without corresponding character input.
after doing some research i found a solution here :
How to run a function once when binding to multiple events that all trigger in Javascript?
i think this is the best solution to prevent calling event twice in my situation

simulate onChange event to fire on HTML input box

I have jQuery that uses the change event from a selection box to update a input box on the form. I need the input box to fire it's change event when I update it's value.
This link on MSDN shows a way to simulate the click event. Is there a technique I can use to simulate a change event?
You can use trigger():
$('#input-id').trigger('change');
You can trigger change event handler. You can simply call it like that:
jQuery('#my_field').change();
which is a shortcut to:
jQuery('#my_field').trigger('change');
See more on the documentation of .change() (its third, attribute-less variation).
This should theoretically do it:
<input id="textinput" value="somevalue" name="somename" />
<script type="text/javascript">
function doSomethingOnInputChange(e) {
console.log('input on change');
}
$('#textinput').bind('change', doSomethingOnInputChange);
$('#textinput').trigger('change');
</script>
It binds an event handler to a custom 'change' event and then fires the event.
There are several good jQuery based answers already (though you didn't use a jQuery tag) but there's another approach that can work for you if you're binding the change event to call a function.
Say you've already bound the change event to the doSomethingOnInputChange function as in Vlad's answer...
Rather than simulating an event by triggering 'change' you can directly call doSomethingOnInputChange - that is, instead of doing:
$('#textinput').trigger('change')
your javascript just makes a call to the same function that gets called anyway when you trigger the event:
doSomethingOnInputChange( ... );
You may or may not want to pass the #textinput DOM element as a parameter in a direct call, or an event parameter (but providing your own event parameter makes this approach hardly worthwhile) -- those depend on what you need to do in the function.

Detecting input change in jQuery?

When using jquery .change on an input the event will only be fired when the input loses focus
In my case, I need to make a call to the service (check if value is valid) as soon as the input value is changed. How could I accomplish this?
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
If you've got HTML5:
oninput (fires only when a change actually happens, but does so immediately)
Otherwise you need to check for all these events which might indicate a change to the input element's value:
onchange
onkeyup (not keydown or keypress as the input's value won't have the new keystroke in it yet)
onpaste (when supported)
and maybe:
onmouseup (I'm not sure about this one)
With HTML5 and without using jQuery, you can using the input event:
var input = document.querySelector('input');
input.addEventListener('input', function()
{
console.log('input changed to: ', input.value);
});
This will fire each time the input's text changes.
Supported in IE9+ and other browsers.
Try it live in a jsFiddle here.
As others already suggested, the solution in your case is to sniff multiple events.
Plugins doing this job often listen for the following events:
$input.on('change keydown keypress keyup mousedown click mouseup', handler);
If you think it may fit, you can add focus, blur and other events too.
I suggest not to exceed in the events to listen, as it loads in the browser memory further procedures to execute according to the user's behaviour.
Attention: note that changing the value of an input element with JavaScript (e.g. through the jQuery .val() method) won't fire any of the events above.
(Reference: https://api.jquery.com/change/).
// .blur is triggered when element loses focus
$('#target').blur(function() {
alert($(this).val());
});
// To trigger manually use:
$('#target').blur();
If you want the event to be fired whenever something is changed within the element then you could use the keyup event.
There are jQuery events like keyup and keypress which you can use with input HTML Elements.
You could additionally use the blur() event.
This covers every change to an input using jQuery 1.7 and above:
$(".inputElement").on("input", null, null, callbackFunction);

Categories