By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,676 Members | 1,669 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,676 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Jun 27 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On May 28, 2:57 pm, Klaus Brune <klaus.brune-RemoveT...@gmail.com>
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
Jun 27 '08 #2

P: n/a
On May 28, 4:56*pm, Thiago Macedo <thiago.ch...@gmail.comwrote:
On May 28, 2:57 pm, Klaus Brune <klaus.brune-RemoveT...@gmail.com>
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

Jun 27 '08 #3

P: n/a
Tom Cole wrote:
On May 28, 4:56 pm, Thiago Macedo <thiago.ch...@gmail.comwrote:
>On May 28, 2:57 pm, Klaus Brune <klaus.brune-RemoveT...@gmail.com>
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
Jun 27 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.