Jump to content
xisto Community
vdesignlabs

Focus() And Select() Problems With Firefox

Recommended Posts

Hi guys,I am new to javascript and am currently learning it with the book Wrox Beginning Javascript 3rd ed.I have just encountered a problem that I am not able to figure out. Could you please help me out.....The problem is that select() and focus() are not working in FF2.0 but works in IE7.This is what the code is supposed to do:1. I enter a age2. If I enter non numerical data and then I tab out of the text area3. An alert box pops up and tells me to correct the age.4. On hitting ok it goes back to the age field.But in FF its going to the next tag(the submit button).This is the code:

<script type="text/javascript">function txt_age_onblur(){	var in_txt_age = document.form1.txt_age;	if (isNaN(in_txt_age.value))	{		alert("Please enter a valid age");		in_txt_age.focus(); //looks as if no need for focus() as I am able to edit the text with only select() in IE. Not working with FF.		in_txt_age.select(); //Not working with FF	}}</script></head><body><form name=form1>Age:<input type=text name=txt_age onblur="txt_age_onblur()" size=3 maxlength=3 /><input type=button value=Submit /></form></body></html>

Thanks for you time friends. Smile..............

Share this post


Link to post
Share on other sites

Solved it!!!!!!!!!I used this instead:

setTimeout("document.form1.txt_age.select()", 1);

and I can't understand why

document.form1.txt_age.select(); 

did not work!!!!!!!!!If somebody can tell me why, it will be appreciated.Thank You...............

Edited by vdesignlabs (see edit history)

Share this post


Link to post
Share on other sites

A time ago i have the same problem and i found that this happens because of the DOM and if you set or not the DOCTYPE to tell the browser which kind of page you serve. So, what i did to resolve this is to attach to the onsubmit event of my form the this reserved word, that references the form itself and of course declare correctly which page i will serve using the DOCTYPE.

 

This is the code that i use on my page:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="<?php echo $languageCode; ?>"><head><script  type="text/javascript">//<![CDATA[function validate_form1(theForm) {	Tot = theForm.elements.length-3; // because i don't need to validate the last 3 fields of my form (2 buttons and one textfield)	for(i = 0; i < Tot;i++) {		if(theForm.elements[i].value == "") {			alert("Error...blah blah blah");			theForm.elements[i].focus();			theForm.elements[i].select();			return false;		}	}	email=theForm.email_field_name.value;	if (!isEmail(email)) {		alert("Error email not valid!!!");		theForm.email_field_name.focus();		theForm.email_field_name.select();		return false;	}	return true;}// other functions//]]></script></head><body><!-- some content --><form action="sendmail.php" method="post" id="form1" onsubmit="return validate_form1(this);"><!-- text inputs and the submit and reset buttons --></form><!-- some content --></body></html>
As you can see, this page is a valid XHTML webpage, please visit the following webpage Contact Us - Calendar Te Recuerdo Perú 2008 - Almanac Te Recuerdo Peru 2008 if you want to see it in action.

 

Of course, you can use this to reference not only your forms also you can use it with your fields, for example, you can attach to the onfocus event of your fields the select() function to select its contents directly like in the following code:

 

<input type="text" name="txt_age" onblur="txt_age_onblur()" size="3 maxlength="3" onfocus="this.select();" />
Best regards,

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.