OnChange event does not work properly - javascript

My OnChange event does not work properly - I want to trigger a function when user changes a textbox's value. But in my tests I have seen that the function triggers when textbox's value changes and textbox loses focus. Something wrong with my browser? Or is it about the ability of JavaScript? If the last one is true how can I can do that? Thanks in advance.

onchange event will trigger when an input field loses focus or when an option is selected from a dropdown menu, that's normal behavior.
If you want an event that will be triggered as the user types in an input field, you can use onkeypress, onkeydown or onkeyup events.

You could do with jquery:
$("textbox_id").keyup(function(){
//do something here
});

write the jquery code on keyup event and blur event also, because if user paste some copied data into textbox by using mouse only in that case only blur event called by jquery.

Related

My change event listener not tracking changes as expected [duplicate]

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);

Differences between keyup() event and change() event in username live change

username html field
Username: <input type="text" name="username" id="username" />
keyup() event
$(document).ready(function(){
$('#username').on('keyup', function(){
var username = $("#username").val();
alert(username);
});
});
change() event
$(document).ready(function(){
$("#username").change(function() {
var username = $("#username").val();
alert(username);
});
});
My question is should I use keyup() event or change() event to do username verification?
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.

Focus event on jQueryUI datepicker

I want to handle focus event on input element with attached Datepicker to save original value.
Unfortunately it seems that any click on popup elements like next month button also generates focus events on input. They look exactly like real focus events from input.
See this fiddle.
<input id="dt" type="text"></input>
and
$("#dt")
.datepicker()
.on('focus blur', function(e) {
console.warn("!%s", e.type, this, arguments[0], event);
});
How can I handle only real focus events while ignoring the rest ?
If I understand correctly what you want to do, you can keep some state in your event handler. When you get a focus event, set a datePickerOpened flag to true and only do your thing when that flag was false when the event was received. Then, set datePickerOpened to false when you get the blur event.

Get the current user input from the onkeydown event (Javascript)

I am able to print whatever user types into the textarea onto the console, but the output on the console doesn't print the most current character typed by the user. There is a picture of the result:
http://postimg.org/image/k44nyls9d/
Here is my code:
http://postimg.org/image/ynpl53cmv/
Thanks
(Sorry I can't directly upload the pictures. I don't have the 10 reputation that's required to post images since I just made the account)
First of all, you can define the events in your jquery, no need to put this in your HTML. When you use keydown, the key isn't registered yet, this happens after this event is fired. You can simply bind change, keydown & keyup to cover all events and get the correct value.
$('#myTextarea').bind('change keydown keyup',function (){
console.log($(this).val());
});
http://jsfiddle.net/KYhzK/
Your answer lays in the Events, you can use onkeyup event instead of onkeydown
onkeydown triggers when you press the keyboard key
onkeyup triggers when you release the keyboard key
Edit:
Since you are using Jquery:
$(document).ready(function(function(){
$("#myTextarea").keyup(function(){
console.log($(this).val());
});
});
Try changing onkeydown to onkeyup. The keydown event more likely happens before the textbox has updated, so it will log the previous value instead of the new one.
since you're using jquery for it, try:
$('#myTextarea').keyup(function (){ console.log($(this).val());});
this will give you the current typed in the textarea

"onchange" event delayed in IE? (ok with Firefox)

It might be a beginner question but I can't understand why the onchange event is never called by IE while it works Ok with Firefox.
<input type="text" id="mytext" size="48" value="" onchange="execute()"/>
<button type="button" onclick="execute()">Go</button>
The execute function is called when the button is clicked but not when the text in the input box is changed.
Any idea?
IE only fires the onchange event when the element loses focus - if you were to click outside the element or tab to a different element it should fire then.
You can get around this by using a different event, for example onkeypress.
While annoying, it is not a bug that onchange is not fired until the element loses focus. (I get around the issue by having multiple bindings for different events; make sure not to clobber a handler and use an update aggregation if appropriate.)
Here is the "official" W3C documentation on the subject:
The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.
Here is the MSDN reference:
This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather [it is fired] when the user commits the change by leaving the text box that has focus.
The behavior, while often annoying, is as specified.
As answered elsewhere, IE doesn't fire the event till you click outside the input field.
Just a quick expaination of how I fixed it with jQuery. (This is a translation of my code, so it may contain bugs...)
<input id="somecheck" name="somecheck" value="1" onchange="dosomething();">
...was changed to...
<input id="somecheck" name="somecheck" value="1">
<script language="javascript">
$(document).ready(function() {
$('#somecheck').change(function() { dosomething(); } );
});
</script>
For those new to jQuery you are basically waiting for the page to become fully loaded, then you are adding the event handler 'dosomething' to the input box.
As far as i remember, IE doesn't handle onchange event the same maner as FF.
The event will be fired when the mouse is clicked.
I advise you to use a library to handle events such as jQuery, Dojo, etc..
ohhh, I spent some time on that issue as well months ago.
I came up with this solution for FF/IE onchange
$("input[name*='delivery_method']").bind(($.browser.msie ? "click" : "change"), function() {
//your code here
});
IE does it after your input loses focus, which isn't until you click the button, tab out, or click somewhere else on the screen. Try onclick or one of the other events.

Categories

Resources