When is one called versus the other? Is there a situation were onChange would be called but onBlur would not be called?
The onBlur event is fired when you have moved away from an object without necessarily having changed its value.
The onChange event is only called when you have changed the value of the field and it loses focus.
You might want to take a look at quirksmode's intro to events. This is a great place to get info on what's going on in your browser when you interact with it. His book is good too.
onblur fires when a field loses focus, while onchange fires when that field's value changes. These events will not always occur in the same order, however.
In Firefox, tabbing out of a changed field will fire onchange then onblur, and it will normally do the same in IE. However, if you press the enter key instead of tab, in Firefox it will fire onblur then onchange, while IE will usually fire in the original order. However, I've seen cases where IE will also fire blur first, so be careful. You can't assume that either the onblur or the onchange will happen before the other one.
An example to make things concrete. If you have a selection thus:
<select onchange="" onblur="">
<option>....
</select>
the onblur() is called when you navigate away. The onchange() is called when you select a different option from the selection - i.e. you change what it's currently selected as.
In Firefox the onchange fires only when you tab or else click outside the input field. The same is true of Onblur. The difference is that onblur will fire whether you changed anything in the field or not. It is possible that ENTER will fire one or both of these, but you wouldn't know that if you disable the ENTER in your forms to prevent unexpected submits.
I think it's important to note here that onBlur() fires regardless.
This is a helpful thread but the only thing it doesn't clarify is that onBlur() will fire every single time.
onChange() will only fire when the value is changed.
onChange is when something within a field changes eg, you write something in a text input.
onBlur is when you take focus away from a field eg, you were writing in a text input and you have clicked off it.
So really they are almost the same thing but for onChange to behave the way onBlur does something in that input needs to change.
onBluris when your focus is no longer on the field in question.
The onblur property returns the onBlur event handler code, if any, that exists on the current element.
onChange is when the value of the field changes.
Related
In my form contains textbox and button. I am doing some operation in textbox (blur) event and button (click) event.
Let's assume:
user enter some text in textbox and click the button. (blur) event invoked but (click) event not invoking.
note : "at the time of clicking the button focus should be in textbox."
example: https://stackblitz.com/edit/angular-b4h9pi
blur event alert is coming but click event alert not coming.
Scenario
In onblur event I make the service call to save that field value. In onClick event I have to save all the fields data. If cursor focus one of the textbox then user click the save button. First I have save the field after finishing the first call, make the second call to save all the data. Do not call the service parallel. I want to call one by one.
Remove alert with console.log or other relevant code. alert will be triggered as as soon as focus is lost from the input even before the button is clicked. So two event is not firing simultaneously
stackblitz
Both events are indeed firing. You can confirm by changing your alert calls to console.log. I believe the browser is likely just blocking multiple alert dialogs.
Update to answer your comment:
You say you want them to fire simultaneously and then you say you don’t so I’m having trouble understanding your needs.
I can tell you this though. The blur event fires, then the click event fires. You should be able to handle whatever you need to in those handlers with that knowledge.
If you need to wait for your blur handler to come back with a response before sending that data along with your click handler, you could theoretically set a variable like
this.blurRequestLoading=true
That way, instead of firing the click request, if blurRequestLoading is true, you could set a this.clickEventPendingBlurResponse=true.
Then when the blurResponse comes back, you can set blurRequestLoading back to false, and if clickEventPendingBlurResponse is true, fire the clickEvent manually within the response handler, and set clickEventPendingBlurResponse back to false.
Hi thanks for your time and effort, i did one logic to sequence the event, please suggest me is this code in production level.
sample code base: https://stackblitz.com/edit/angular-czxn9o
I have a primefaces autocomplete element which works great except one thig. The problem is that when I enter a valid text (which is mappable to the data behind) but I don't select the element from the propositions, and don't press tab or enter, nothing happens.
So I enter a value and click into another field, the element is not selected and the validation fails. However, I don't want the user to force to explicitly select an item.
My ideas were, that i put an onchange listener to the input element and trigger the primefaces itemSelect event within. But I don't know how to do that, if it's even possible.
Or maybe there are other solutions?
Thanks in advance!
I found a way, although it might not be the most beautiful and easy one.
Maybe it helps somebody...
This is a specific solution for primefaces (5.3), but it should work for other versions too.
$('#form\\:txtAutoComplete_input').val('Foo');
$('#form\\:txtAutoComplete_input').trigger('keydown');
$('#form\\:txtAutoComplete_input').trigger('input');
$('#form\\:txtAutoComplete_panel .ui-autocomplete-item').trigger('click');
For some reason, after the value is entered into the input field, you have to trigger the keydown and the input event in that order. After these events the autocomplete list shows with the matching values. There you have to trigger click on a certain element, so all the backing bean stuff is properly executed.
There is an API for Primefaces widgets.
For instance ;
<p:autoComplete id="gtautoaomplet" value="#{item.soemprop}" completeMethod="#{bean_CrossCheckNew.completeText}" scrollHeight="250"/>
In JS code ;
widget_form_mapingGrid_0_gtautoaomplet.search('foo');
When you write "PrimeFaces.widgets" in your browser console you can see all the widgets available in your page.
For more datail :
https://primefaces.github.io/primefaces/jsdocs/index.html
Good luck.
Much thought has already gone into practices around validating the user input in a form. I have a programming question about the "inline validation", also called "onblur validation". (A research article about the benefits of inline validation can be found here).
Let's say I have a very simple form with 5 inputs and 1 submit button at the bottom. The user focusse on the first field first. After pressing tab or manually clicking on it, he goes to the second input. This triggers the validation of input field 1. Depending on the techniques used, this might take a few seconds (for example, if a server postback is required to truly validate the field).
MY problem lies with the last field. User will be expecting to see the inline validation after they're done. But users do generally not tab if the next ui element is a button instead of yet another input element. Thus, the onblur validation will not trigger and the user gets no feedback, which they might mistake for erronous input. If they manually click on the submit button, the validation will trigger... but it will also trigger the total form submit, likely leading to another page if all is valid. Now, some users might be smart enough to realize this is onblur validation and they should "click anywhere" to trigger the validation, but I can't really count on that.
I thought of one solution: using the keypress event instead of the onblur event for the last input field of a form. However, the article cited above states it is better to avoid this kind of validation. It would also drastically increase the amount of validation to be done (one time for every keypress)
What are your thoughts on trying to mimic the nonexistant event "user stopped typing but did not focus out of input element"? Can it be done by combineing the keypress event and a timer? (Like, if user did not type anything for 2 seconds, then validate?)
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms
$('input[type="email"]').keyup(function(){
clearTimeout(typingTimer); //reset the timer
typingTimer = setTimeout(validateEmail, doneTypingInterval);
});
Change validateEmail to the name of the function that validates the email input.
I have an input tag. This tag does not have the autocomplete feature turned off, thus, one does not necessarily need to release a key to change the value of this field and focus another one. My question is: how can I detect ANY value changes of this particular field, like e. g.
<input onvaluechange="//do following..." />
The JavaScript attribute onchange does not fire on change of value, only on changes like blur, focus, etc...
EDIT: It also doesn't necessarily be a key press. Due to the autocompletion, the user can simply mouse-click the autocompletion result to change the value. This would not fire an onkeydown event.
It also doesn't necessarily be a key press. Due to the autocompletion
...and many other non-key-based operations, such as right-click-cut/paste, drag and drop, undo/redo, spellchecker adjustments and so on.
HTML5 defines an oninput event to catch all direct changes.
Unfortunately browser support today isn't there (no support in IE, and there are some bugs in others), so all you can do if you really need to detect all changes to an input value earlier than onchange is to use setInterval to add a poller that constantly compares against the previous value.
Detecting "value" of input text field after a keydown event in the text field?
I had a similar problem and binding to a dozen of different events just doesn't cut it, since there are so many different ways of changing input value, as bobince noted.
So - I ended up writing dead simple jQuery monitoring plugin that's generic in nature.
With it you can monitor input value changes, textarea text changes, div content changes, etc:
https://github.com/nixd3v/monitor
Tracking div content changes:
$.monitor('add', function(){return $("div#someDiv").html()}, function(){
console.log('Div content changed');
});
Tracking input value changes:
$.monitor('add', function(){return $("#password").val()}, function(){
console.log('input value changed');
});
It also uses a loop of course, however, not through setInterval, but rather through using setTimeout along with a self-executing anonymous function:
(function(){
// do some stuff
setTimeout(arguments.callee, 100);
})();
What this does - this guarantees, that the next call is not made before your code was executed. If you use polling in your code - this is the right way of doing it.
You can use the onKeyPress attribute to monitor changes typed in by the user.
For example:
<input type='input' onKeyPress='SomeScriptMethod();'>
I have a method called checkKeyCode(obj) which simply takes the character you type into a textbox and replaces it with its keyCode.
This method is called from onkeydown attribute of textbox input (onkeydown="return checkKeyCode(this)").
The problem is then I want to be able to press tab and focus to the next element. I don't have to know the element's id or name or tag. Basically I want to combine my method's functionality with the default functionality of browser when you press Tab key (which sets focus to the next element in the form).
Can this be done. If so how?
Any help would be greatly appreciated.
Check the keycode in your handler and if the value is 9, it's a tab. Exit your handler if it is and return false.
Also, don't use the onkeydown event. Use onkeyup instead.