Moving the cursor (insertion point) in an input (text) field

[Klaus Brune]

Hello all,

When one tabs through a form (specifically, in Firefox), all the text in
a field is automatically selected.

What I'm looking for is a way to put a function (in onFocus perhaps)
that will automatically move to the END of the existing text (a blinking
cursor).

Yes, I've Googled, but cannot seem to locate just what I'm looking for.
I'm not a newbie when it comes to programming, but my forte is Python
and PHP, not Javascript.

Thanks,
Klaus

[Thiago Macedo]

On May 28, 2:57 pm, Klaus Brune <[e-mail]>
wrote:

Hello all,

When one tabs through a form (specifically, in Firefox), all the text in
a field is automatically selected.

What I'm looking for is a way to put a function (in onFocus perhaps)
that will automatically move to the END of the existing text (a blinking
cursor).

Yes, I've Googled, but cannot seem to locate just what I'm looking for.
I'm not a newbie when it comes to programming, but my forte is Python
and PHP, not Javascript.

Thanks,
Klaus

Klaus,

just an idea, maybe a bit naive: send to client a LEFT ARROW command
after the select method, which will make the cursor to point at the
end of selection.

Thiago

[Tom Cole]

On May 28, 4:56*pm, Thiago Macedo <[e-mail]:

On May 28, 2:57 pm, Klaus Brune <[e-mail]>
wrote:

Hello all,

When one tabs through a form (specifically, in Firefox), all the text in
* a field is automatically selected.

What I'm looking for is a way to put a function (in onFocus perhaps)
that will automatically move to the END of the existing text (a blinking
cursor).

Yes, I've Googled, but cannot seem to locate just what I'm looking for.
I'm not a newbie when it comes to programming, but my forte is Python
and PHP, not Javascript.

Thanks,
Klaus

Klaus,

just an idea, maybe a bit naive: send to client a LEFT ARROW command
after the select method, which will make the cursor to point at the
end of selection.

Thiago

You may try use selection ranges, something like the following:

function setCaretToEnd(ctrl) {
if(ctrl.setSelectionRange) {
ctrl.setSelectionRange(ctrl.value.length, ctrl.value.length);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.moveStart('character', ctrl.value.length);
range.select();
}
}

Then you can call this onfocus: <input id="test" type="text"
onfocus="setCaretToEnd(this);"/>

HTH

[Klaus Brune]

Tom Cole wrote:

On May 28, 4:56 pm, Thiago Macedo <[e-mail]:

>On May 28, 2:57 pm, Klaus Brune <[e-mail]>
wrote:

>>Hello all,
When one tabs through a form (specifically, in Firefox), all the text in
a field is automatically selected.
What I'm looking for is a way to put a function (in onFocus perhaps)
that will automatically move to the END of the existing text (a blinking
cursor).
Yes, I've Googled, but cannot seem to locate just what I'm looking for.
I'm not a newbie when it comes to programming, but my forte is Python
and PHP, not Javascript.
Thanks,
Klaus

Klaus,

just an idea, maybe a bit naive: send to client a LEFT ARROW command
after the select method, which will make the cursor to point at the
end of selection.

Thiago

You may try use selection ranges, something like the following:

function setCaretToEnd(ctrl) {
if(ctrl.setSelectionRange) {
ctrl.setSelectionRange(ctrl.value.length, ctrl.value.length);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.moveStart('character', ctrl.value.length);
range.select();
}
}

Then you can call this onfocus: <input id="test" type="text"
onfocus="setCaretToEnd(this);"/>

HTH

Thanks, Thiago

This works -- but only sort of... it works when I enter the field via a
mouse click, but not when tabbing into the field (all the data is still
selected). Any ideas?

Note: this is a company-specific application using Firefox 2.0.0.14
exclusively, so compatibility with other browsers is not an issue.

Note 2: this may seem like a small issue, but it becomes more magnified
when you consider that this form is being used by touch-typists (no
mouse) to enter literally tens of thousands of items per day. So having
to constantly move the cursor to the end of the text to modify the last
one or two characters (in this case, numbers) is becoming a major nuisance.

The full story: The form has two text boxes to contain numbers, a
starting and ending sequence. The idea is that the data entry person
will enter the starting sequence, and when they tab to the next field,
the ending sequence, it will automatically (1) copy the starting
sequence because the numbers are similar, to save typing (which the form
now does in an onBlur event in the starting sequence), and (2) move the
cursor to the end of the field so that all the typist has to do is
backspace once or twice to change the last few digits of the ending
sequence.

The problem I'm having is with the implementation of part 2 above.
Simulating a right-arrow key press upon entry into the field seems like
it should work, but I have not been able to get that working either.

- Klaus