onFocus problema

05-02-2005

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

05-02-2005

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

05-02-2005

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...

leodippol...@gmail.com wrote:
> 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

05-02-2005

wrote:
> 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...

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

05-02-2005

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!

05-12-2005

Jerome Bei wrote:

> You can try the onfocusin / onfocusout-event [...]

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

05-12-2005

<> wrote in message
news: oups.com...
> 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

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();
}

--
Grant Wagner <>
comp.lang.javascript FAQ - http://jibbering.com/faq

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Problema con ISDN Y CONEXION PPTP	ELR	Cisco	2	07-28-2005 11:18 AM
problema con vb net e system.net.socket	Fabio Cirillo	ASP .Net	0	03-29-2005 07:44 PM
Problema con archivos dbx	Jose Joaquin de Haro	ASP .Net	1	01-28-2005 01:41 PM
Problema de Configuración!	Juan	ASP .Net	1	03-03-2004 04:03 PM
problema complicado: RMI y no localizacion de driver de acceso a BBDD-SORRY spanish	[XaToA]	Java	1	02-29-2004 11:31 AM