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

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.

Related

Is there a way to know if "blur" was called by "element.blur()" or if it was "actual" blur?

So, I have a simple question and I actually already wrote it in the title. :) But I will repeat it one more time, just to be completely clear. And the questions is:
Is there a way to know if "blur" was called by "element.blur()" or if it was "actual" blur? By saying "actual" I mean, clicking on some random area to make input lose focus, or by clicking TAB. :)
Of course. You should attach the blur event to the specific element you want.
An example would be:
<input id="myInput" type="text" />
function handleBlur(event){
console.log(event.target); // outputs: <input id="myInput" type="text">
}
document.getElementById('myInput').addEventListener('blur', handleBlur);
This function will only be called when blur event occurs for that input only. Nevertheless, you could use event.target to see the element that triggered the blur event.
EDIT:
Tested only on Chrome, but the following achieves what you are requesting.
<input id="myInput" type="text" />
function handleBlur(event){
if(event.sourceCapabilities !== null){
console.log('blur by user');
}
else{
console.log('blur programmatically')
}
}
var elem = document.getElementById('myInput');
elem.addEventListener('blur', handleBlur);
elem.focus();
elem.blur();
Try it online on jsfiddle.
Since each browser handles event differently though, my suggestion is to trigger a different, custom event to handle this case.
ooooo there's 2 different types of blur, one is an event called blur or onBlur for jQuery users which is for 'out of focus' basically the user clicks it and then clicks somewhere else. That's onBlur. Another is blur the CSS filter value for the filter property.
So! There's a few ways to see if an element is 'out of focus' one is like this:
var blur = true;//we start off not focused
element.addEventListener('blur', function() {
blur = true;
});
element.addEventListener('focus', function() {
blur = false;
});
So basically the above is "If it's not focused we are blured, if we are out of focus we blur". (Feel I'm making this more complicated to understand?). Try using element.blur() and element.focus() in the console and see what happens!
Another method is simply to check that the active element (focused element) is not your element.
document.getActiveElement.id !== element.
In jQuery there is a :focus prop you can use in the selector like so $('element:focus') which is also handy for :checked to get a checked radio button $('input[type="radio"]:checked')
Unfortunately though I don't think there's a way to see if another tab has been click. There probably is a way but in my experience, I had previously made a JS clock which I added to the title which appears as the tab's name. It didn't update when the tab was not opened so I think there's probably some more voodoo to look at to run your JS when the page is not in focus

Why does not self focus work in JavaScript?

Whenever a blur event is triggered from any input element, I want to set focus to one particular element.
This issue arises when I am trying to focus to the same element triggering the blur event.
Why does this only works, when the element I am trying to focus on to, is not the one triggering the event?
[Issue Illustration]
and explanation as per the fiddle:
The element I am trying to focus to is col0
Unless the element to trigger the blur event is not col0 it works perfect
But when blur is triggered from col0 itself, then $("#col0").focus() does not work.
Q: Why? & What is the workaround/solution?
P.S: I am just trying to know the cause of the behavior and ways to overcome it. Concerns about the usability, is NOT THE QUESTION.
This works in FF for me...
$('input').on('blur', function() {
setTimeout(function () { $("#col0").focus(); }, 0);
});
it is just to postpone a UI action a bit (after processing the blur event is finished).
Warning: in jsfiddle FF won't let you edit the code after you try it, once you get to the input you are stuck there until refresh
Update: The explanation is tricky, as it is a matter of implementation in FF (as Chrome and IE behave as you expected), my guess is that FF prevents firing related events when you are in the event handler for the same element (a thing that may potentially lead to infinite cycle), using setTimeout you are firing the event soon after you leave the handler (and even UI has a chance to redraw itself)
It looks like you're trying to keep focus on everything except the control you're on. Try this:
$('input:not(#idofcontrol)').blur(function() {
$('#idofcontrol').focus();
});

Why does addEventListener not work for radio button's focus event in Chrome?

Consider the following example (also available here: http://jsfiddle.net/hq8Fg/1/). It works fine in IE9, but doesn't work in Chrome 16.
In IE, if I click on the radio button, I see the message, but in Chrome nothing happens.
<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
<script type="text/javascript">
function begin() {
var rb1 = document.getElementById('rb1');
rb1.addEventListener('focus', function() { document.getElementById("theText").value = "focus"; }, false);
}
</script>
</head>
<body onload="begin()">
<input id="rb1" type="radio" />
<textarea id="theText"></textarea>
</body>
</html>
Any idea why it's not working in Chrome and what I can do to fix it?
p.s. I know I can probably use a library like JQuery, but I want to know if it's possible without using any libraries.
According to this less than stellar source, the focus event for a radio button is only supposed to fire when you tab into it, which you can see in your fiddle.
I'll see if I can find some better documentation of this—MDN ideally.
EDIT
From this MDN article
Changing the focus
There are several ways to change the currently focused element. The
simplest is to call the focus method of a the XUL element that you
wish to set the focus to. The blur method can be used to remove the
focus from an element. The following example demonstrates this:
Example 5 : Source View
<button label="Focus"
oncommand="document.getElementById('addr').focus()"/> Or, you can use
the methods advanceFocus and rewindFocus on the command dispatcher.
These methods move the focus to the next element in sequence or the
previous element respectively. This is what happens when the user
presses TAB or Shift+Tab.
For textboxes, a special attribute, focused is added whenever the
element has the focus. You can check for the presence of this
attribute to determine if the element has the focus, either from a
script or within a style sheet. It will have the value true if the
textbox has the focus and, if the textbox does not have the focus, the
attribute will not be present.
Suppose you wanted to move the focus from where it currently is, to
the next place the browser thinks it should be. A user typically does
this by hitting the "Tab" key. You can do this anywhere you have a XUL
browser document by simply:
(emphasis mine)
You could try the onclick event since the problem isn't that the event is not called when the element gets focused; The problem is that it is really not focused on click. You can figure that out through focusing your textarea and then pressing SHIFT+Tab.
As best I can tell, the focus event only fires for a radio button when the keyboard is used to navigate to a radio button. For clicking on the radio button, use the click event like this: http://jsfiddle.net/jfriend00/XatCv/

OnChange event does not work properly

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.

How to detect all change/click events of HTML select that still has focus?

How can I reliably detect all events that cause the the value of an HTML select to change, while that element still has the focus?
For regular mouse input, either the click or change event works fine. For keyboard input (and for mouse input using the scroll wheel), however, the change event doesn't fire until focus is lost. I get around this by using the keyup event for keyboard changes (and ignoring the mouse wheel problem) but find my code is littered with a lot of stuff like this:
$(".my-select").keyup(handleSelect).change(handleSelect);
function handleSelect() {
var $this = $(this);
// don't process keyup events that don't result in change
if ($this.data('old-val') == $this.val()) { return; }
$this.data('old-val', $this.val());
// ... other stuff ...
}
Is there a simpler pattern/recipe that solves this problem (jQuery or straight JavaScript)?
"change" doesn't fire until the element loses focus, by design. What you're doing may be the only way to solve this. You can also look at selectedIndex as well as value.
As Diodeus said, the change event is fired when the element loses focus. But you could check if the pressed key is the enter key and then call your function. And I think hardly anybody uses the mouse wheel to change the value of a select box...

Categories

Resources