Cursor control in text boxes:

[ethveg]

I have a form with several text boxes.

The onblur handler for each calls a function, and so does the onfocus handler. Both the functions alter the display.

When I am in one text box and click into another, it appears (from using alert boxes to track the results) that browsers PROCESS the onblur first, then the onfocus, but then DISPLAY the onfocus changes and finally display the changes dictated by the onblur.

The onfocus may find text already in the box, and when it does it places the cursor at the end of the text.

But then the browser does the onblur screen-changes and when it returns focus to the new text box the cursor is in the leftmost position.

Does anyone know how I can position the cursor in that text box so it appears in the position following the last byte of whatever text is already entered (thus enabling the user to continue typing)?

[tgreer]

This code is Internet Explorer ONLY. The object/method is "createTextRange".

The JavaScript function might look like:

function setCursorPos( x ) {

    var txtRange = x.createTextRange();
    txtRange.moveStart( "character", x.value.length - 2 );
    txtRange.moveEnd( "character", 0 );
    txtRange.select();
}

And you call it:

<form >
    <input type="text" onfocus="setCursorPos(this);" />
</form>

What this will do is move the cursor to the END of the current value of the textbox.

[tgreer]

Did this work? Do you need more help? Please give us some feedback.

[lehenry]

Hi,

I use this:

<TEXTAREA NAME="txt" onfocus='this.value=this.value;'>

and it works well with any web browser...
Maybe it could help you!

Henry, en français dans le texte

[ethveg]

I apologize for not replying sooner.

When I first tried the suggestions above, Henry's didn't work at all (and still doesn't.) The snippet below:

This is the text-box:
<input type="text" size=8 value="" id="A" onfocus="this.value=this.value">

DOES put the cursor at the end BRIEFLY on re-Focus, but then it jumps back to the start. (Interestingly, inserting an "alert()" at the end of the onFocus handler LEAVES the cursor at the end when the alert box is closed - but of course I don't want an alert everytime the user returns to a text-box.

tgreer's IE-specific function "setCursorPos(x)" didn't work when I tried it either (on re-focus it highlighted the last two bytes of the text in the box) and although I questioned why the .moveStart had a -2 in its second argument, I was by then working on the CONTENT part of my project and so chose neither to try to debug the function nor to reply that it didn't work (since my attention was then elsewhere and I didn't want to continue a thread that might not lead to a solution.)

But now I've returned to the text-box problem, and by removing the -2 in .moveStart's second argument I find that it works fine.

So I'm posting now to say "Thanks, tgreer!" I've acknowledged your contribution via a comment line in my source code for the script.