PDA

Click to See Complete Forum and Search --> : focus() Firefox & IE

mitt
09-27-2005, 03:31 PM
I am trying to create a validation script that works in both Firefox and IE. I would like to set the focus back to the field with the error but can't seem to get it to work. I have made it work in IE but in Firefox I get the alert as I should but then the focus moves to the next field in the tab order. Is there a way to fix this? Is this a bug in Firefox?
Ultimater
09-27-2005, 04:05 PM
All the bugs are in Internet Explorer my friend ;)

But it works in IE! (http://www.howtocreate.co.uk/wrongWithIE/)

Do you have some code for me to mark up?
tabzter
09-27-2005, 07:20 PM
Internet Explorer - Bad Bad Bad
Mozilla FireFox - Good Good Good

huga buga huga chuga...
mitt
09-27-2005, 10:57 PM
The whole script is pretty large but this is a scaled down version


<script language='JavaScript1.2' type='text/javascript' src='js/functions.js'></script>

<input type="hidden" value="" name="match_1_player_1_game_1" onblur="checkValue(this.value,this.name);">



contents of the js/functions.js file

function checkValue(score,fieldname)
{
if(score > 10)
{
alert("Error!" You have entered an invalid score");
fieldname.focus();
fieldname.select();
}
}


What I am looking to do is not let the person entering in these scores move on to the next score box (about 74 more to tab through) unless the value is less than 10. I want to correct it before moving on to the submit because the page scrolls forever in length and I don't want them to be forced to scroll all the way to the top because the first box is wrong.
Ultimater
09-28-2005, 12:24 AM
<script type="text/javascript">
function checkValue(score,fieldname)
{
if(score > 10 || isNaN(score))
{
alert("Error! You have entered an invalid score");
fieldname.focus();
fieldname.select();
}
}
</script>
<input type="text" value="" name="match_1_player_1_game_1" onblur="checkValue(this.value,this);">
mitt
09-28-2005, 12:12 PM
Still doesn't work. After the alert it just sends the focus to the next input box.
Ultimater
09-28-2005, 04:08 PM
Oh, I see what you mean now, I didn't add a blank INPUT field after your example. All you need to do is add a timeout:

if(score > 10 || isNaN(score))
{
alert("Error! You have entered an invalid score");
setTimeout(function(){fieldname.focus();fieldname.select();},10)

}
mitt
09-28-2005, 06:37 PM
Well it works but I get an error in the JS console after it focuses.



Error: [Exception... "'Permission denied to get property XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: http://www.mydomain.com/js/functions.js :: anonymous :: line 21" data: no]
Source File: http://www.mydomain.com/js/functions.js
Line: 21 <- This changes each time
Ultimater
09-28-2005, 07:23 PM
This might be a little over board but it works none-the-less:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Image Viewer</title>
<script type='text/javascript'><!--
var checkFocus=true;checkEl=null;
function checkValue(score,fieldname)
{
checkFocus=false;
if(score > 10 || isNaN(score))
{
checkEl=fieldname;
alert("Error! You have entered an invalid score");
setTimeout(function(){if(checkEl)checkEl.focus();checkEl.select();},100);
}
checkFocus=true;
}
//--></script>
</head>
<body>
<p>
<input type="text" value="" name="match_1_player_1_game_1" onblur="if(checkFocus){checkValue(this.value,this)}">
<input type="text" value="">
</body>
</html>


Firefox seems to take a little time to set focus back to the page after the alert and needs a split second to do so. I also had to declare my varaible gloabally to work with the setTimeout and for extra security I also added a boolean check onblur.