HTMLHelp Forums [Powered by Invision Power Board]

Posted by: supernashwan Feb 25 2008, 06:47 AM

Hi,

I have no idea what I'm doing wrong here but this code works in FF and not in IE (6 or 7). I'm simply trying to give the 2nd textbox focus.

Note, if you uncomment the alert and try in IE again then it suddenly works, any ideas why???

Code (you can simply cut this out and save in a text file, drop it in FF and IE and see what i mean):

<html>
<head>
<title></title>
</head>

<body>

<form>
<input type="text" id="mytext1" name="mytext1" value="1"><br>
<input type="text" id="mytext2" name="mytext2" value="2"><br>
<input type="text" id="mytext3" name="mytext3" value="3"><br>
</form>

<script language="javascript" type="text/javascript">
//window.alert("hello");

var mytext = document.getElementById("mytext2");
mytext.focus();

</script>
</body>

</html>

Any help with this would be much appreciated.

Cheers

Paul.

Posted by: pandy Feb 25 2008, 07:01 AM

It works. Maybe you are the victim of some security restrictions.

Posted by: supernashwan Feb 25 2008, 07:16 AM

QUOTE(pandy @ Feb 25 2008, 12:01 PM)

It works. Maybe you are the victim of some security restrictions.

Hmmmmm, security on "focus"?

I forgot to mention, when you first load the page in IE it gives focus. However select textbox 1 or 3, when you reload the page (Ctrl + F5) it does not set the focus back to 2.

It doesnt do this in FF....

Posted by: pandy Feb 25 2008, 07:35 AM

Security on JavaScript that runs locally. What OS do you run?

Posted by: pandy Feb 25 2008, 07:39 AM

QUOTE

I forgot to mention, when you first load the page in IE it gives focus. However select textbox 1 or 3, when you reload the page (Ctrl + F5) it does not set the focus back to 2.

Now you tell me! Yeah, that happens for me too. Afraid I don't know what's normal for IE to do in this case.

Posted by: pandy Feb 25 2008, 07:47 AM

I don't understand the difference myself, but it's the way you put the JS loose in BODY. Put it in a function instead and call it onload and it'll work.

CODE

<html>
<head>
<title></title>

<script type="text/javascript">

function focusIt()
{
var mytext = document.getElementById("mytext2");
mytext.focus();
}

onload = focusIt;

</script>

</head>
[...]

Posted by: supernashwan Feb 25 2008, 09:18 AM

QUOTE(pandy @ Feb 25 2008, 12:47 PM)

I don't understand the difference myself, but it's the way you put the JS loose in BODY. Put it in a function instead and call it onload and it'll work.

CODE

<html>
<head>
<title></title>

<script type="text/javascript">

function focusIt()
{
var mytext = document.getElementById("mytext2");
mytext.focus();
}

onload = focusIt;

</script>

</head>
[...]

Cant use onload, this is a simple version of a much more complex asp.net/ajax application (this code is already in another event, no onload).

I have however found the answer via a mate of mine:

<script language="javascript" type="text/javascript">

setTimeout(
function()
{
var mytext = document.getElementById("mytext2");
mytext.focus();
mytext.select();
}
, 1);
</script>

Appartent this is because IE uses a thread for javascript that is being processed at the same time as it's own browser behaviour . So its just pure luck whether the javascript code will do what it is supposed to. Using setTimeout will force it into a separate thread.

Thanks for listening though ;-)

cheers

Posted by: Christian J Feb 26 2008, 03:08 PM

QUOTE(supernashwan @ Feb 25 2008, 03:18 PM)

Appartent this is because IE uses a thread for javascript that is being processed at the same time as it's own browser behaviour . So its just pure luck whether the javascript code will do what it is supposed to. Using setTimeout will force it into a separate thread.

Interesting, with your original script I can see the script focusing on the second form field (as intended) for a split second, before defaulting back to the previously focused field.

Without any javascript it seems IE7 retains the focus on a previous focused form field when you reload with F5. Reloading with Enter in the address field works though (BTW does anyone know what the difference is between these reload methods?).

Posted by: little highlander Oct 16 2008, 08:35 AM

QUOTE(supernashwan @ Feb 25 2008, 06:47 AM)

Hi,

I have no idea what I'm doing wrong here but this code works in FF and not in IE (6 or 7). I'm simply trying to give the 2nd textbox focus.

Note, if you uncomment the alert and try in IE again then it suddenly works, any ideas why???

Code (you can simply cut this out and save in a text file, drop it in FF and IE and see what i mean):

<html>
<head>
<title></title>
</head>

<body>

<form>
<input type="text" id="mytext1" name="mytext1" value="1"><br>
<input type="text" id="mytext2" name="mytext2" value="2"><br>
<input type="text" id="mytext3" name="mytext3" value="3"><br>
</form>

<script language="javascript" type="text/javascript">
//window.alert("hello");

var mytext = document.getElementById("mytext2");
mytext.focus();

</script>
</body>

</html>

Any help with this would be much appreciated.

Cheers

Paul.

Its as easy as making it a function then loading every time in the body tag. As so...

<html>
<head>
<title></title>
</head>

<body onLoad = "focusIt()">

<form>
<input type="text" id="mytext1" name="mytext1" value="1"><br>
<input type="text" id="mytext2" name="mytext2" value="2"><br>
<input type="text" id="mytext3" name="mytext3" value="3"><br>
</form>

<script language="javascript" type="text/javascript">
//window.alert("hello");

function focusIt()
{
var mytext = document.getElementById("mytext2");
mytext.focus();
}

</script>
</body>

</html>

Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ JavaScript Focus on a textbox