We help IT Professionals succeed at work.

Why the combo set focus not working in Mozilla firefox 7.0?

Loganathan Natarajan
on
I use the below code to test this idea? but it does not focus to the combo box?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body onload="document.getElementsByTagName('select')[0].focus();">
<form id="form1" name="form1" method="post" action="">
  <label>
  <select name="select">
    <option value="12" selected="selected">test</option>
    <option value="34">test2</option>
  </select>
  </label>
  <p>
    <label>
    <input type="text" name="textfield" />
    </label>
  </p>
</form>
</body>
</html>

Open in new window

Comment
Watch Question


use id
<body onload="document.getElementById('sel').focus();">

  <select id='sel' name="select">

Loganathan NatarajanLAMP Developer
BRONZE EXPERT

Author

Commented:
not working,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body onload="document.getElementById('sel').focus();">
<form id="form1" name="form1" method="post" action="">
  <label>
  <select name="select" id="sel">
  <option value="0"></option>
    <option value="12" selected="selected">test</option>
    <option value="34">test2</option>
  </select>
  </label>
  <p>
    <label>
    <input type="text" name="textfield" />
    </label>
  </p>
</form>
</body>
</html>

Open in new window

Kiran SonawaneProject Lead
BRONZE EXPERT
Top Expert 2011

Commented:
Check this code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){
    
    $("#cmb").val("34");
  });
  
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label>
  <select name="select" id="cmb">
    <option value="12">test</option>
    <option value="34">test2</option>
  </select>
  </label>
  <p>
    <label>
    <input type="text" name="textfield" />
    </label>
  </p>
</form>
</body>
</html>

Open in new window

Kiran SonawaneProject Lead
BRONZE EXPERT
Top Expert 2011
Commented:
Sorry
Add below code  after line 10

$("#cmb").focus();
its working in firefox also but focus is not as visible as IE

Commented:
Assign a unique ID to the select box and use the syntax:

document.form1.select1.focus();

As per your modified code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body onload="document.form1.select1.focus();">
<form id="form1" name="form1" method="post" action="">
  <label>
  <select id="select1" name="select1">
    <option value="12" selected="selected">test</option>
    <option value="34">test2</option>
  </select>
  </label>
  <p>
    <label>
    <input type="text" id="textfield" name="textfield" />
    </label>
  </p>
</form>
</body>
</html>
with your code also focus is coming in firefox but its not as visible as in IE.
Loganathan NatarajanLAMP Developer
BRONZE EXPERT

Author

Commented:
because I use the recent version FF as 7.0.0 .. but not visible focus ... above none of the code..
i checked in 3.6 version as well and in that one also not visible focus .i think its browser dependent.
Loganathan NatarajanLAMP Developer
BRONZE EXPERT

Author

Commented:
@ chaituu may be correct,

@sonawanekiran .. thanks your code, helped some extend to focus the field but not visible still... i use jquery
to focus in drop down in fire fox its wont be visible.for selecting drop down u can use either javascript or jquery
Loganathan NatarajanLAMP Developer
BRONZE EXPERT

Author

Commented:
actually i use jquery to focus as the first field drop down in my form,

$('form:not(.filter) :input:visible:second').focus()

but it is not visible to select the combo box  as other browsers fine....
as you are telling its working in other browsers even though if u use jquery ,in firefox the focus is not working as expected as its working in other browsers.
Loganathan NatarajanLAMP Developer
BRONZE EXPERT

Author

Commented:
very true...
Commented:
If you really need to select ByTagName in a form then
use syntax below:

<body onload="document.form1.getElementsByTagName('select')[0].focus();">

Note: as chaituu implied the focus might not be apparent
         in the select box in ff 7.0, although it is actoally selected.
Loganathan NatarajanLAMP Developer
BRONZE EXPERT

Author

Commented:
Thank you

Explore More ContentExplore courses, solutions, and other research materials related to this topic.