document.getElementById(id).focus() is not working for firefox or crome

Question

When ever I do onchange event, its going inside that function its validating, But focus is not comming I am using document.getElementById('controlid').focus();

I am using Mozilla Firefox and Google Crome, in both its not working. I don't want any IE. Can any one tell me what could me the reason.

Thanks in advance

Here's the code:

var mnumber = document.getElementById('mobileno').value; 
if(mnumber.length >=10) {
    alert("Mobile Number Should be in 10 digits only"); 
    document.getElementById('mobileno').value = ""; 
    document.getElementById('mobileno').focus(); 
    return false; 
}

Answer 1

Try using the jquery library, then you can do the following which should work in all browsers:

$('#mobileno').focus();

I used this today in Chrome so I know it works there. This one thing may not be enough on its own to justify adding a whole library to your javascript code base, but I think you'll find it useful in many other ways this one just being the first.

To use jquery, include the jquery library at the top of you javascript references:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;

Answer 2

I also recomend you jQuery's focus() function. Your life will become simpler :) Some time ago I got problem with focus (w/o jQuery) and I gave up.

Answer 3

Try using a timer:

var mnumber = document.getElementById('mobileno').value;
if (mnumber.length >=10) 
{ 
    alert("Mobile Number Should be in 10 digits only");
    document.getElementById('mobileno').value = "";
    window.setTimeout(function ()
    {
        document.getElementById('mobileno').focus();
    }, 0);
    return false;
}

A timer with a count of 0 will run when the thread becomes idle. If that doesn't help, try the code (with the timer) in the onblur event instead.

Answer 4

Are you trying to reference the element before the DOM has finished loading?

Your code should go in body load (or another function that should execute when the DOM has loaded, such as $(document).ready() in jQuery)

body.onload = function() { 
    // your onchange event handler should be in here too   
    var mnumber = document.getElementById('mobileno').value; 
    if(mnumber.length >=10) {
        alert("Mobile Number Should be in 10 digits only"); 
        document.getElementById('mobileno').value = ""; 
        document.getElementById('mobileno').focus(); 
        return false; 
    }    
}

Answer 5

Make sure you use "id" and "getElementById" as shown here:

<FORM id="my_form" name="my_form" action="">
<INPUT TYPE="text" NAME="somefield" ID="somefield" onChange="document.getElementById('my_form').submit();">
</FORM>

Answer 6

The timeout suggested above worked around the issue on Chrome. Not issue existed on IE8 or FF3. Thanks for the tip as always. My code that to set focus that worked is: window.setTimeout(function() { document.form1.password.focus(); },0);