javascript bug: focus and blur loop

Lost User 234980 · September 22nd, 2006, 8:05 am

hi people...

i posted this thread in the firefox bugs' forum believing that the following content is a bug. so, nobody had replied. i found a script that someone said that it don't work in firefox, don't know which version, but however, it don't work to me either. my version is 1.5.0.1 and i was debuging the script and i have noticed something curious. first, this was the code that someone provided:

Code: Select all

<html><head><title>Test</title>
<script>
function Check () {
if(document.getElementById('valor1').value>10){
alert("El valor es de tiene que ser menor de 10");
document.form1.valor1.focus();
}

}
</script>
</head><body>
<form>
cual es tu puntuación?<br>
<input>
</form>
</body></html>

if you got the tabbed windows functionality you will perceive the following behavior. test the code and you will notice that after the alert function, the focus statement seem not to take action (by the way, this happen either the tabbed windows functionality is avaible or not, but keep reading). after you click 'OK' button from alert function, hit any alphanumeric key to prove that the focus action is not executed. after that, change the tab window and go back to the initial tab and you will notice that the focus funcion take action. this is the first behavior that i indentify as bug.

the other behavior is using the same script but changing to the statement's order as follow:

Code: Select all

<script>
function Check () {
if(document.getElementById('valor1').value>10){
document.form1.valor1.focus();
alert("El valor es de tiene que ser menor de 10");
}

}
</script>

in this behavior you will notice that the function keep looping without displaying the alert message. is like the alert function cause a blur event after the focus action but the message alert is canceled due to the onblur event of the field and keep in that cycle.

i know that i'm including javascript code and hence this thread maybe should be posted in the Web Development / Standard Evangelism forum's section, but i consider those behaviors as bugs. I'm a bit lazy and busy to look in the forum for similar thread. but if someone know a similar thread, please let me know where i can find the thread and ignore this thread.

thanks for reading this thread and any comment is welcome
pd: sorry for my english, isn't my native language

old np · Post by **old np** » September 22nd, 2006, 9:32 am

Did the forum mangle your code? I don't see any way that could work, unless you were giving the form and input elements ids or names.

jscher2000 · Post by **jscher2000** » September 22nd, 2006, 11:07 am

zerokilled, the MozillaZine Forum text parser stripped the attributes from your HTML code. In addition to using the BBCode [code] and [/code] tags -- which is much appreciated thank you -- you need to check the box to "Disable HTML in this post" (this checkbox is above the Preview button in the more full-featured compose screen you see after choosing [Quote] or after your initial preview of quick reply). You can use the Preview feature to check that it worked prior to posting. Thanks!

Lost User 234980 · September 22nd, 2006, 1:35 pm

sorry guys, i don't noticed the missing attributes. here again the original code:

Code: Select all

<html><head><title>Test</title>
<script type="text/javascript">
function Check () {
if(document.getElementById('valor1').value>10){
alert("El valor es de tiene que ser menor de 10");
document.form1.valor1.focus();
}

}
</script>
</head><body>
<form name="form1" action="">
cual es tu puntuación?<br>
<input type="text" size="6" name="valor1" id="valor1" onblur="Check()">
</form>
</body></html>

however, i was debugging the script and finally came with this solution but something it give some problems like halting the browser:

Code: Select all

<script type="text/javascript">
function Check () {
if(document.getElementById('valor1').value>10){
alert("El valor es de tiene que ser menor de 10");
setTimeout('document.form1.valor1.focus()',75);
}
} 
</script>

i'm suspecting that the engine gecko have the bug instead of firefox because i had tested the code in seamonkey, mozilla, flock and is the same story as firefox.

thanks people for noticing the missing attributes...

jscher2000 · Post by **jscher2000** » September 22nd, 2006, 2:31 pm

This reminds me of a problem programming in Microsoft Word for Windows forms, where there is no command to "cancel navigation" when the event being monitored is "exit" (or in this case, blur).

If you want to use onblur, I think your timeout idea is good, and I didn't have any problems with it. I used slightly different code in my test:

Code: Select all

function Check() {
 if(document.getElementById("valor1").value > 10){
  alert("El valor es de tiene que ser menor de 10");
  setTimeout('document.getElementById("valor1").focus();',75);
 }
}

When does your browser crash? Not on this simple form, I assume.

Maybe you could also use another event instead, like onchange. I'm not sure that applies to <input type="text">.

Lost User 234980 · September 24th, 2006, 7:08 am

even in this simple form the browser seem to crash. when crashed, it make a weird behavior, is like the keyboard is halted and then can't type nothing in the input box. try this: type a number greater than ten (10), loose the focus clicking in your desktop. in this phase you will notice that the browser prompt the alert twice, click 'ok'. then, try to type something in the input box. also you will notice that the input box don't gain the focus. in this phase is where the browser seem to crash causing keyboard not to respond in the input box. and last, loose the focus again clicking on your desktop and click back again the browser (either in the input box or other area of browser). this time you will notice that everything is back again to normal. i tested this procedure in mozilla and firefox, that is the reason that i assume that the gecko engine have a bug.

what i did previously is like a procedure to cause a "crash" and "repair" that crash. the solution that i showed in previous post work well, but what if users accidentaly or by other reason loose the focus from browser? that means that i got to instruct those users about this behavior. however, is useless to maintain users in this procedure.

jscher2000 · Post by **jscher2000** » September 24th, 2006, 10:15 am

Yes, onblur fires when the user changes the focus away from the browser window. It is annoying, I noticed it when switching to WordPad to make changes to your test code. It would be better not to use onblur, or to change what occurs when the control loses focus. For example, you could simply check the value in your onsubmit handler, or you could write a message to the page next to the control, e.g., "Value must be less than 10" rather than using an alert().

Lost User 234980 · September 24th, 2006, 9:16 pm

i really appreciate your help and suggestion, but that is up to the original designer because i don't know what exactly that person had in mind. i showed him/her the solution using the setTimeout function and replied me that now the code work well. but anyway, i will mention him/her you suggestions. i just consider myself part of a community in a forum and i like to help people using my knowlegde, so that is the reason that i sticked up with this thread.

thanks for the time you had spended...