Setting Focus 1

JLizOB · Jan 21, 2008

Hi I am trying to set the focus to a textbox when validation errors out. below is the code I am trying to use and I keep getting an error that says tBox is undefined. Also, are there any focus methods or workarounds to get this working in both IE and firefox, rather than just IE? Thanks.

Javascript:

Code:

function cell_onblur(sender)
{
    sender.value = trim(sender.value);
    if(isNumeric(sender.value))
        sender.style.backgroundColor = '';
    else
    {
        var tBox = sender;
        setTimeout("tBox.focus()", 100);
        alert('Not a valid number. \nPlease reenter number of units.');
    }
}

HTML:

Code:

<td>
<input onkeydown="return cell_onKeyDown(event)" onchange="cell_onchange(this)" onfocus="cell_onfocus(this)" [red]onblur="cell_onblur(this)"[/red] type="text" value="14" />
</td>

trollacious · Jan 21, 2008

What's wrong with:

Code:

        alert('Not a valid number. \nPlease reenter number of units.');
        sender.focus();

?

Lee

kaht · Jan 21, 2008

Here's your problem:

Code:

        [!]var[/!] tBox = sender;
        setTimeout("tBox.focus()", 100);

Putting var in front of the tBox variable declaration defines the variable tBox as having local scope to the function. When any code is executed using the setTimeout function, it will not have local scope to the function it was called from. This means it can not access variables and objects that have scope only within that function. Now, if you define the tBox variable w/o putting the var keyword in front of the declaration, the tBox variable will have global scope, and can be accessed by all functions (including the setTimeout function). Additionally (and this is the way I would do it), you can still define the variable with the var keyword outside the function, and that will also give it global scope. So, change your code to look like this and it should work:

Code:

[!]var tBox;[/!]
function cell_onblur(sender)
{
    sender.value = trim(sender.value);
    if(isNumeric(sender.value))
        sender.style.backgroundColor = '';
    else
    {
        [!][s]var[/s][/!] tBox = sender;
        setTimeout("tBox.focus()", 100);
        alert('Not a valid number. \nPlease reenter number of units.');
    }
}

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

JLizOB · Jan 21, 2008

Thank you for the response everyone! Trollacious I cannot use that method because it bombs in firefox. Kaht thank you for the solution and the explanation. It does not bomb out in firefox now, but still does not set the focus to the textbox. Is there anyway to do this in firefox?

kaht · Jan 21, 2008

JLizOB, I experienced the same thing that you did - but only when using the onblur handler. It's almost as if firefox has a built in mechanism to prevent this. I can understand that to an extent - viewing a page with a textbox that sets focus back to the textbox when focus is lost would be a bit obnoxious. Now, I did notice that firefox would play nice if the onblur element of the textbox wasn't responsible for setting focus back to the textbox.

This example I typed up used a button to set the focus, and it worked fine:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

var tBox;
function blah(obj) {
   tBox = obj;
   setTimeout("setFocus(tBox)", 1000);
   alert("test");
}

function setFocus(obj) {
   obj.focus();
}

</script>
<style type="text/css"></style>
</head>
<body>

<input type="text" onblur="" id="a" />
<input type="button" value="click me" onclick="blah(document.getElementById('a'))" />

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

JLizOB · Jan 21, 2008

I have a form with multiple columns and rows of text boxes that a user will be tabbing through to input values. SO when they tab out of one text box into the next I want to run the event there and put the focus back to the text box if the value is not a number. Are there any events I could use other than onblur for a scenario like this??

kaht · Jan 21, 2008

Well... onblur would be the one I would suggest barring the problems you're experiencing. onchange is a suitable event handler for such things - sometimes. If the user tabs through the field and makes no changes it won't kick off the event handler though.

I usually don't enforce data validation on the fly for things like this. I find it much easier to do all data validation checks in the onsubmit handler for the form instead. This provides the same safety to ensure that the corrupt data never hits the database, but localizes all the validation to one spot. Easier to debug, easier to maintain, and likely will not run into the problems that you're experiencing. I use the focus() and select() methods all the time for this purpose and have never experienced the problems you're having.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

JLizOB · Jan 21, 2008

Kaht thanks so much for your help. I finally got it I had to use the setTimeout method but had to do it after my alert call.

kaht · Jan 21, 2008

That's odd, I wonder if the alert call was causing the element to lose focus again and put it into some sort of perpetual loop. Oh well... glad you got it sorted out.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

JLizOB · Jan 21, 2008

One last thing. I am also using the onKeyDown event handler with the following code

Code:

function cell_onKeyDown(e)
{
    var keynum;
    var keychar;
    var numcheck;

    if(window.event) // IE
	{
	    keynum = e.keyCode;
	}
    else if(e.which) // Netscape/Firefox/Opera
	{
	    keynum = e.which;
	}

    //alert(keynum);
    if ((keynum >= 35 && keynum<= 40) || (keynum >= 96 && keynum<= 105) || keynum == 8 || keynum == 9 || keynum == 190 || keynum == 110)
        return true;
        
    keychar = String.fromCharCode(keynum);
    numcheck = /[^0-9.]/g;
    return !numcheck.test(keychar);
}

Code:

<td>
<input [red]onkeydown="return cell_onKeyDown(event)"[/red] onchange="cell_onchange(this)" onfocus="cell_onfocus(this)" onblur="cell_onblur(this)" type="text" value="14" />
</td>

and it works fine in IE but in firefox it works the first time a user presses the button, but the second time it allows the press to go through. It alternates back and forth like that. It works then it breaks, it works then it breaks etc.... Have you ever run into this?

kaht · Jan 21, 2008

I never use the onkeydown event handler either. The onkeyup event handler is much easier to use because the value has already been committed, meaning you don't have to jump through the hoops of messing with the keyCodes and stuff like that. The onkeydown event is kinda messy when trying to accommodate for different browsers.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Setting Focus 1

JLizOB

Programmer

trollacious

Programmer

kaht

Programmer

JLizOB

Programmer

kaht

Programmer

JLizOB

Programmer

kaht

Programmer

JLizOB

Programmer

kaht

Programmer

JLizOB

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor