onFocus problema

L

leodippolito

Hello,

I have an input element with an onfocus event handler that is
responsible for changing its value:

---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script>
function doSomething(objSender)
{
objSender.value = 'abc';
}
</script>
</head>
<body>
<INPUT id="input1" type="text"><br>
<INPUT id="input2" type="text"
onfocus="doSomething(this);"><br>
<INPUT id="input3" type="text">
</body>
</html>
---

The problem is:

I am in input1 and press the TAB key to navigate to input2. At this
moment, if input2 is empty, it will change for 'abc' and will receive
the focus (the cursor will be there). So far so good.

However, if input2 is not empty, after pressing the TAB key, input2
will change for 'abc' and WILL NOT RECEIVE THE FOCUS!

Why this behavior? How can I have the focus set in input2, no matter if
it's empty or not?

I appreciate any help.

Leonardo D'Ippolito
 
J

Jerome Bei

Hi,

Seems like the object gets the focus directly after the onfocus event
fires, and after that your method is called, which changes the object value.

You can try the onfocusin / onfocusout-event or call
objSender.select(); after changing the object value.

--Jerome
 
A

acglag

I am not having that problem but, to be safe, you could modify your
function to set focus to the object being passed in:

function doSomething(objSender) {
objSender.value = 'abc';
objSender.focus();
}

Hope that helps...
 
J

Jerome Bei

I am not having that problem but, to be safe, you could modify your
function to set focus to the object being passed in:

function doSomething(objSender) {
objSender.value = 'abc';
objSender.focus();
}

Hope that helps...
Click to expand...

I have tried that out, it doesn't seem to work. In fact, the object
*has* the focus, only because the object value is changed afterwards,
you don't see the cursor anymore. (Just try to type some additional text
into the second input field after switching with tab).

(Tested with IE6)

--Jerome
 
L

leodippolito

Jerome, acg, thanks for the answers.

The best workaround I found for this was:

---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script>
function setCaretToEnd (control)
{
if (control.createTextRange) {
var range = control.createTextRange();
range.collapse(false);
range.select();
}
else if (control.setSelectionRange) {

control.focus();
var len = control.value.length;
control.setSelectionRange(len,len);
}
}

function doSomething(objSender)
{
objSender.value = 'abc';
setCaretToEnd(objSender);
}
</script>
</head>
<body>
<INPUT id="input1" type="text" NAME="input1"><br>
<INPUT id="input2" type="text" onfocus="doSomething(this);"
NAME="input2"><br>
<INPUT id="input3" type="text" NAME="input3">
</body>
</html>
---

Which works in IE but doesn't work very well in Mozilla. In Mozilla
it leaves a selection in input2.

Does anyone have an alternative to solve this problem?

Thanks!
 
T

Thomas 'PointedEars' Lahn

Jerome said:
You can try the onfocusin / onfocusout-event [...]
Click to expand...

Micro$oft forgot their usual MSDN Library statement there:

| There is no public standard that applies to this $foo.

Using onfocusin/onfocusout attributes creates invalid HTML
and the respective DOM object properties are IE only.

<http://www.w3.org/TR/html4/>
<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings>

There is a DOMFocusIn event defined in DOM Level 3 Events, however that
specification is still a Working Draft and definitions therein would apply
to DOM object properties only (so no onfocusin/onfocusout attributes in
non-extensible/extended markup languages):

<http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTypes-complete>


PointedEars
 
G

Grant Wagner

Hello,

I have an input element with an onfocus event handler that is
responsible for changing its value:

---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script>
function doSomething(objSender)
{
objSender.value = 'abc';
}
</script>
</head>
<body>
<INPUT id="input1" type="text"><br>
<INPUT id="input2" type="text"
onfocus="doSomething(this);"><br>
<INPUT id="input3" type="text">
</body>
</html>
---

The problem is:

I am in input1 and press the TAB key to navigate to input2. At this
moment, if input2 is empty, it will change for 'abc' and will receive
the focus (the cursor will be there). So far so good.

However, if input2 is not empty, after pressing the TAB key, input2
will change for 'abc' and WILL NOT RECEIVE THE FOCUS!

Why this behavior? How can I have the focus set in input2, no matter
if
it's empty or not?

I appreciate any help.

Leonardo D'Ippolito
Click to expand...

function doSomething(objSender)
{
objSender.value = 'abc';
if (objSender.createTextRange)
{
// added functionality, places the cursor at the
// end of any text in the input in IE or any other
// user agent that supports createTextRange(),
// TextRange#moveStart() and TextRange#select()
var r = objSender.createTextRange();
if (r.moveStart)
{
r.moveStart('character', objSender.value.length);
if (r.select)
{
r.select();
}
}
}
// fixes your initial problem, guarantees the input you
// just set the value of retains focus; may not be
// necessary - testing without seems to place focus
// on input by default with above code
objSender.focus();
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Uhhhhh, What can I do next? 6
Emulating the <Tab> Key operation ? 11
Registration Form 7
I dont get this. Please help me!! 2
About as basic "Newbie-Question" that you can get. 3
Help me sort out this script 1
What "might" I be doing wrong with this snippet? 6
Script to send email not working 1

Members online

Total: 59 (members: 3, guests: 56)
Robots: 308

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,825
Latest member
VernonQuy6

Latest Threads

Top