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]

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]

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]

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

 

[Thiago Macedo]

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

Klaus,

testing here, i discovered that when a textbox gets focus by tab key
the content text is selected, after the onfocus event. So our aproach
would not work. You must disable the tab key and change the focus
manualy.
this works fine on FF 2.0.0.12:

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();
}
}
function noTab(e, nxtCtrl) {
if (e.which==9)
{
var ctrl;
ctrl = document.getElementById(nxtCtrl);
ctrl.focus();
setCaretToEnd(ctrl);
return false;
}
return true;
}

<input name="ob" id="ob" type="text" onkeydown="return
noTab(event, 'ob2');" />
<input name="ob2" id="ob2" type="text" />

You'll need to do something similar to SHIT+TAB

Regards,
Thiago