The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> JavaScript Focus on a textbox, Problems giving focus to a textbox
supernashwan
post Feb 25 2008, 06:47 AM
Post #1





Group: Members
Posts: 3
Joined: 25-February 08
Member No.: 5,043
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2008, 07:01 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
It works. Maybe you are the victim of some security restrictions.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
supernashwan
post Feb 25 2008, 07:16 AM
Post #3





Group: Members
Posts: 3
Joined: 25-February 08
Member No.: 5,043
QUOTE(pandy @ Feb 25 2008, 12:01 PM) *

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


Hmmmmm, security on "focus"? smile.gif

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....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2008, 07:35 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Security on JavaScript that runs locally. What OS do you run?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2008, 07:39 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2008, 07:47 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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. unsure.gif

CODE

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

<script type="text/javascript">

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

onload = focusIt;

</script>

</head>
[...]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
supernashwan
post Feb 25 2008, 09:18 AM
Post #7





Group: Members
Posts: 3
Joined: 25-February 08
Member No.: 5,043
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. unsure.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 26 2008, 03:08 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
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?).


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
little highlander
post Oct 16 2008, 08:35 AM
Post #9





Group: Members
Posts: 3
Joined: 16-October 08
Member No.: 6,911
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 02:39 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC