browser compatibility: Javascript: onblur: Firefox vs. InternetExplorer

S

Steve

Hi;

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>
 
D

David Mark

Hi;

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.
Click to expand...

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.
Click to expand...

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?
Click to expand...

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.
 
T

Thomas 'PointedEars' Lahn

Steve said:
[...]
<html>
<head>
<title>Test onblur FF vs IE</title>
<script language = "JavaScript">
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);
Click to expand...

`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">
Click to expand...

Your form does not need a name, but the element needs an `action' attribute.
Apple
<input type = "text" name = "apple" onblur = "procApple(this.value);">
Click to expand...

type="text" is redundant here as that is the default value of the attribute.
<br>
<br>
Click to expand...

Don't use `br' elements for margins; use CSS instead.
<input type = "submit" name = "submitButton" value = "submit" onclick
= "validate();">
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Anomaly: onblur handling AND advice on validation 1
onBlur madness! 2
Javascript DOM 1
Image upload not working in browser 4
Firefox onblur question 1
onblur for table 2
onblur function interrupting form submission 5
Help with Firefox compatibility 5

Members online

No members online now.
Total: 60 (members: 0, guests: 60)
Robots: 426

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,736
Latest member
AdolphBig6

Latest Threads

Top