/    Sign up×
Community /Pin to ProfileBookmark

Setting focus with Mozilla

Copy linkTweet thisAlerts:
Jul 23.2009

I have a form. When each text field is left (onblurr), I validate the contents and if its not acceptable, I clear the field and set the cursor to the start of that field. Here’s the code:

function checkit(field) {
var pattern=””
var message=””
if (field.value != null) {
if(field.name == “Zipcode”) {
pattern = /[D]/g
message = “Please enter only numbers.”
}
else if(field.name == “Zipcode4”) {
pattern = /[^0-9]/g
message = “Please enter only numbers.”
}
:
:
:
var a = field.value;
if(!pattern.test(a)) return true;
alert(message);
field.value = “” ;
field.focus()
return false ;
}
}

The thing is, it works fine in IE, but not in any Mozilla based browser (Netscape, Firefox, etc.). What happens is that the field in question is blanked, but the cursor goes to the next field.

Can anyone tell me how to get it to work in both kinds of browsers?

Thanks in advance.
Jim
ps. Oddly enough, it also works (sort of) in Safari.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJul 23.2009 — Try switch:
<i>
</i>field.value = "" ;
alert(message);
field.focus();
Copy linkTweet thisAlerts:
@jimweinbergauthorJul 23.2009 — Nope, that's not it. Same problem.
Copy linkTweet thisAlerts:
@KorJul 23.2009 — Not a bright idea to use [B]onblur[/B]. Scenario: User leaves the field1 without fill it and focuses the field2. [B]onblur[/B] (on field1) is activated, call the function and move the focus from the field2 back to the field1. But now that means the field2 lost the focus and, as field2 also has no value, the function is called again, this time to validate the field2. Alert the message and ... move the focus again on the field2... But the focus leaves the field1, thus the function is called again... and so on on and so forth in an endless loop, from field1 to field2, back and forth.

Usually, the validation function is called [B]onsubmit[/B], with a [B]return[/B], in the [B]form[/B] element.
Copy linkTweet thisAlerts:
@AuchiJul 23.2009 — use onchange instead of onblur

Not sure it'll solve your focus problem
Copy linkTweet thisAlerts:
@jimweinbergauthorJul 24.2009 — Kor - The senario you described doesn't happen. I do use onsubmit, but do an entirely different set of validations at that point.

Auchi - I had tried onchange. That has the same effect (problem) as onblur, plus it causes IE to have the problem also. With onblur, IE does what I want it to.
Copy linkTweet thisAlerts:
@hoangkcJul 24.2009 — Not a bright idea to use [B]onblur[/B]. Scenario: User leaves the field1 without fill it and focuses the field2. [B]onblur[/B] (on field1) is activated, call the function and move the focus from the field2 back to the field1. But now that means the field2 lost the focus and, as field2 also has no value, the function is called again, this time to validate the field2. Alert the message and ... move the focus again on the field2... But the focus leaves the field1, thus the function is called again... and so on on and so forth in an endless loop, from field1 to field2, back and forth.

Usually, the validation function is called [B]onsubmit[/B], with a [B]return[/B], in the [B]form[/B] element.[/QUOTE]

Hi Kor, as I know, the scenario you described never happen, except that you call field.focus() method (inside event onblur of field) via window.setTimeout
Copy linkTweet thisAlerts:
@NedalsJul 24.2009 — I ran into this problem and solved it with a 'timeout'.

To get your version to work, I had to add the global variable 'currfield'.

Not quite sure why? ?

<i>
</i>&lt;script type="text/javascript"&gt;
var currfield = '';
function checkit(field) {
var pattern="";
var message="";
if (field.value != null) {
currfield = field;
if(field.name == "Zipcode") {
pattern = /[D]/g;
message = "Please enter only numbers.";
}
else if(field.name == "Zipcode4") {
pattern = /[^0-9]/g;
message = "Please enter only numbers.";
}

<i> </i> var a = field.value;
<i> </i> if(!pattern.test(a)) return true;
<i> </i> alert(message);
<i> </i> field.value = "";
<i> </i> setTimeout("currfield.focus()", 1);
// field.focus();
return false;
}
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form&gt;
&lt;input type="text" name="Zipcode" onblur="return checkit(this)"&gt;
&lt;input type="text" name="Zipcode4" onblur="return checkit(this)"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@jimweinbergauthorJul 24.2009 — Nedals.

Now that's what I'm talking about? It works great!? Thanks.

Jim
×

Success!

Help @jimweinberg spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...