onBlur...focus() works only sometimes

abacus

08-22-2004, 06:28 PM

Hi all,

When I validate in the <form return onSubmit="submitTest();"... focus() works fine.

Same with the <body onload="loader()"...

Same with the onClick="javascript: document.foo.text1.select(); document.foo.text1.focus()">. All the above works as expected.

But when I try to validate upon leaving a textbox, using onBlur, the alert works (when value.length == 0), but the focus still jumps on to the next object.

Using Netscape 7.x, how do I get the focus to remain on the textbox if the entry was bogus???

Code:

<script type="text/javascript">
// --------< loader fn
function loader() {
window.status="I'm in the function Loader";
document.getElementById('text1').value = "Start";
document.getElementById('text1').select();
document.getElementById('text1').focus();
}// ---------------------------------------------------

function validText1(element) {
if (element.value.length == 0) {
alert("You need to type something into TextBox One");
document.getElementById("text1").focus();
return false;
}
}

function validText2(element) {
if (element.value.length == 0) {
alert("You need to type something into TextBox Two");
document.getElementById("text2").focus();
return false;
}
}

function submitTest() {
if (document.foo.text1.value == "test") {
alert("Type something besides the word test in TextBox1");
document.foo.text1.focus();
document.foo.text1.select();
}
return false //always 'false' because there's no followup form
}
}

// -->
</script>
</head>

<body onload="loader()" bgcolor="#FFFFFF" text="#000000">

<p> </p>

<form name="foo" return onSubmit="submitTest();"><div align="center">
Enter up to eight characters in TextBox One
<input type="text" id="text1" name="text1" maxlength="8" size="10"
onBlur="return validText1(this)">
<br />
Enter up to eight characters in TextBox Two
<input type="text" id="text2" name="text2" maxlength="8" size="10"
onBlur="return validText2(this)">
<p> </p>
<input type="button" name=button1" value="Focus on TextBox One"
onClick="javascript: document.foo.text1.select(); document.foo.text1.focus()">
    
<input type="submit" id="submit" name="submit" value="Submit">

</div>
</form>

</body>
</html>

A1ien51

08-22-2004, 06:54 PM

try removing the return false from the function and see if that works.

Eric

abacus

08-22-2004, 07:49 PM

I pulled the return false from the validText#() functions
and the corresponding return from the onBlur calls...

and still the focus jumps to the next object.

I've searched all sorts of javascript forums ( even saw questions similar to mine, but they remained unanswered :( )

Is this something that jst won't work in Netscape???

Thanx for the reply, A1ien51... I'll try just about anything.

anyone else have a suggestion?

Philip M

08-23-2004, 07:34 AM

Change document.getElementById("text1").focus();

to document.getElementById("text1").select();

abacus

08-23-2004, 06:54 PM

... replacing focus() with select() doesn't make a lick o' difference. (At least not in IE 6.0 or Netscape 7.1).

In my brief code snippet, I can get focus() to work correctly with the onload, the onSubmit(), and even in the onClick; but danged if I can put the focus back into the textbox that launched the onBlur handler.

Is this just impossible? Is there a document somewhere (like at W3C) to support this impossibility?

Thanx again, Philip M. I appreciate your effort & reply.

I'm still 'quandry-fied'... Help!

Willy Duitt

08-23-2004, 07:03 PM

Since you already have a value in text1 just use an onchage event handler...

And you could have warned someone that if they ran those codes they would be stuck in an endless loop of alerts...

This is the second time today that I have had to escape by closing the process in my task manager and losing all of my open windows....

.....Willy

abacus

08-24-2004, 04:40 PM

Willy, honestly, I wouldn't knowingly post code that falls into an unending loop. That code doesn't do that on my computilator.

Regarding the onChange handler, that's only fired if the value is changed; but, like with many forms, the text value may be initially blank... and I'm trying to notify the user (with the focus on the object at hand, not the next in the tab sequence), that he/she can't go past a blank field.

Although it will catch the blank textbox with the onSubmit; and the focus will reliably be on the desired textbox, I'd rather not wait all the way until form validation, i.e., onSubmit.

The issue here isn't so much whether a field is blank or not, as it is about leaving a field containing any sort of bogus value. And, informing the user that the value is bogus; and, conveniently having focus in the field with the bogus value (blank or otherwise).

I think I've discovered a workaround in IE6, but it doesn't fly in NN7.

Again, sorry for any difficulty I may have caused you; but, thank you for your effort & reply. Any other ideas utilizing 'onBlur' and 'focus()'?

sktaylor

04-19-2008, 08:27 AM

I figure you have moved on by now, so I'm posting this for people like me, who searched for 2 hours and didn't find anything. I came up with this and it turns out the solution is simple once you hear it. You use a timer and a call back. While you would logically think that returning false on an onblur would prevent the blur, it doesn't. It also seems that you can't change the element in focus in javascript while the browser is in the process of a focus change. Wordy I know but the punchline is if you use a timer and a call back you can break out of the focus change event stack and the timer event will fire just after the focus processes snapping the focus back to the element you select. Code example follows. I hope someone finds this useful.

Kendrick

<html>
<head>

<script type="text/javascript">

function onblur_eventHandler(evt){
var sourceElement;
var eventType;

if(window.event){ // IE
sourceElement= window.event.srcElement;
eventType= window.event.type;
}else{ // GOOD BROWSER
sourceElement= evt.target;
eventType= evt.type;
}

validateField(sourceElement)
}

var badElement;

function validateField(sourceElement){

// validate the change however you want
// for the example i'm just using the name of the field

if(sourceElement.name == "badInput"){
badElement= sourceElement;
setTimeout("refocusBadElement()",10); // if you make the 10 value big you can watch the callback happen
}
}

function refocusBadElement(){
badElement.focus();
}

</script>
</head>
<body>

<form>
<input name="goodInput" type="text" value="good" onblur="onblur_eventHandler(event)">
<input name="badInput" type="text" value="bad" onblur="onblur_eventHandler(event)">
</form>

</body>
</html>