如何确定表单元素中字符串的位置?

时间:2011-12-28 01:23:16

标签: javascript

我有一个输入。

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

让我们假装光标在你好的e之后,如下:

He|llo

如何确定光标在该字符串中的位置?意思是,我怎样才能告诉我光标在字符串{1}之后(或在字符串{2}之前)?

编辑:但实际上,我的最终目标是确定光标是否在字符串的末尾。我不需要知道它是否在中间。如果它在字符串的末尾,我正在捕获箭头按下并将使它跳转到下一个表单元素。如果它在开头或中间,那么我不会跳转到下一个表单元素。在箭头按下时跳转已经工作,但无论光标在字符串中的哪个位置都会跳转。

2 个答案:

答案 0 :(得分:1)

如果您使用的是jQuery,则有一个插件 - fieldselection。它支持开始/结束,选定的文本等。

答案 1 :(得分:1)

这是一个可以在没有外部依赖关系的情况下执行所需操作的解决方案:http://jsfiddle.net/imsky/ZH5JL/

假设字段为#inputId和#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)
};