I'm using
- Firefxo 2.0.0.11
- Internet Explorer 7.0.5730.11
Windows XP Professional Service Pack 2
I'm noticing that IE and Firefox handle onblur events slightly
differently. In the HTML page below I have a text field and a submit
button. The top one has a function connected to the onblur event
when someone leaves the text field. The submit button has a funciton
connected to the onclick event.
In both browsers, both functions will fire when I move the mouse from
the text field to the button and press the button.
However, in IE processing will halt in the first function for onblur
and if I press cancel in the resulting prompt, processing will
stop. This is what I want.
In Firefox the prompt will come up to but processing will fall through
to the onlick function at the same time. I don't want this.
Why does this happen and how can I alter my code to work the same in
both browser, such that Firefox will do the onblur code and not fall
through to the onclick unless the prompt gets a positive response?
Thanks much in advance for any information
<html>
<head>
<title>Test onblur FF vs IE</title>
<script language = "JavaScript">
function procApple(typeApple)
{
if(typeApple != 'gala')
prompt("I only eat Gala Apples, please give me a gala");
var self=this;setTimeout(function(){self.focus();},1);
}
function validate()
{
alert("in validate function");
}
</script>
</head>
<body background = "white">
<form name = "form1">
Apple
<input type = "text" name = "apple" onblur = "procApple(this.value);">
<br>
<br>
<input type = "submit" name = "submitButton" value = "submit" onclick
= "validate();">
</form>
</body>
</html>
You mean that when you click the button, the text input loses focus,
which fires its blur event and then the button fires its click event.
>
> However, in IE processing will halt in the first function for onblur
> and if I press cancel in the resulting prompt, processing will
> stop. This is what I want.
You can't have it.
>
> In Firefox the prompt will come up to but processing will fall through
> to the onlick function at the same time. I don't want this.
>
> Why does this happen and how can I alter my code to work the same in
> both browser, such that Firefox will do the onblur code and not fall
> through to the onclick unless the prompt gets a positive response?
The solution is to validate properly (in a submit listener attached to
the containing form.) In addition to cross-browser issues, there is
nothing more annoying than popups that interfere with focusing.
http://validator.w3.org/
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
> function procApple(typeApple)
> {
> if(typeApple != 'gala')
> prompt("I only eat Gala Apples, please give me a gala");
> var self=this;setTimeout(function(){self.focus();},1);
`this', and therefore `self' (no matter the closure), refer to the Global
Object here, of which procApple() is a method. That object has no
standardized focus() method (hence a runtime error is possible), nor does it
make sense to call that method after a one millisecond timeout (the actual
timeout will always be greater; not below 10 ms in Gecko-based UAs compiled
for x86, and then there's the system timer tick to increase that in practice).
Instead, you want to pass the value of `this', as it is in the event handler
attribute value, as argument, and then use that object reference to refer to
the event target:
function isMethod(o, p)
{
return o && /\b/function|object)\b/i.test(typeof o[p]) && o[p];
}
function procApple(o)
{
if (o.value != "gala")
{
// ...
if (isMethod(o, "focus"))
{
o.focus();
}
}
}
<... onblur="procApple(this);">
That said, don't use `onblur', use the `onsubmit' attribute of the `form'
element instead.
> [...]
> <form name = "form1">
Your form does not need a name, but the element needs an `action' attribute.
> Apple
> <input type = "text" name = "apple" onblur = "procApple(this.value);">
type="text" is redundant here as that is the default value of the attribute.
> <br>
> <br>
Don't use `br' elements for margins; use CSS instead.
> <input type = "submit" name = "submitButton" value = "submit" onclick
> = "validate();">
Don't use the `onclick' attribute of the submit button for form validation;
use the `onsubmit' attribute of the `form' element instead:
<form ... onsubmit="return validate(this);">
...
</form>
validate() would have to return `true' on success, `false' otherwise.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee