How to determine where cursor is in a string in a form element?

Question

I have an input.

<input name="inputName" id="inputId" value="Hello" />

Lets pretend that the cursor is after the e in hello, like so:

He|llo

How can I determine the position of the cursor within that string? Meaning, how can I make it tell me that the cursor is right after string{1} (or before string{2})?

Edit: Really though, my end goal is determine if the cursor is at the end of the string. I don't need to know if its in the middle. If it's at the end of the string, I am capturing arrow presses and will make it jump to the next form element. If it's at the beginning or middle, then I am not making that jump to the next form element. Jumping around on arrow presses works already, but it jumps irregardless of where the cursor is in the string.

score 1 · Answer 1 · answered Dec 28 '11 at 01:30

1

If you are using jQuery there is a plugin - fieldselection. It supports start/end, selected text, etc.

answered Dec 28 '11 at 01:30

Bakudan

19,134
9
53
73

For this task, and for the browser compatibility it will be better with jQuery. – Bakudan Dec 28 '11 at 01:36
jQuery is not an option, unfortunately. Nor is prototype. – phpmeh Dec 28 '11 at 01:39
All I need is to get pointed in the write direction. Should I be looking at Range or something else? – phpmeh Dec 28 '11 at 01:41

score 1 · Accepted Answer · answered Dec 28 '11 at 01:46

Here's a solution that does what you want without external dependencies: http://jsfiddle.net/imsky/ZH5JL/

Assuming fields #inputId and #secondField:

var field = document.getElementById("inputId");

function checkCaret(f) {
    if (caretPos(f) == field.value.length) {
        document.getElementById("secondField").focus();
    }
}

function caretPos(f) {
    if (f.createTextRange) {
        var r = document.selection.createRange().duplicate();
        r.moveEnd("character", f.value.length);
        return r.text == "" ? f.value.length : f.value.lastIndexOf(r.text)
    } else return f.selectionStart;
}

field.onkeyup = function() {
    checkCaret(this)
};
field.onkeydown = function() {
    checkCaret(this)
};
field.onfocus = function() {
    checkCaret(this)
};

I found and used http://stackoverflow.com/questions/263743/how-to-get-cursor-position-in-textarea and it worked like a charm! Thanks for your help though! — phpmeh, Dec 28 '11 at 01:50

How to determine where cursor is in a string in a form element?

2 Answers2