乐者为王

Do one thing, and do it well.

关于input[text]里的光标定位

当使用Tab键切换时,想把光标定位在input[text]的首部。在网上找了一些光标定位的资料发现大多数都是用createTextRange来实现的,而且都出自一个实例。可惜的是在Firefox下createTextRange无效。

后来在Firefox的开发者站点上发现有个setSelectionRange方法可以实现这样的功能。使用格式:

1
2
3
4
5
o.setSelectionRange(start, end);

o:为文本输入框对象
start:为字符串的起始位置
end:为字符串的末位置

尝试后发现并不能定位到文本首位,总是全选所有的文本内容,在后面加上获的焦点的命令也不管用。最后还是在国外的一个站点上找到了解决的办法。

下面的代码在Firefox下不能定位到首位,只能选中全部:

1
2
3
4
5
6
7
8
9
10
11
12
function setCaretPosition(aCtrl, aPos) {
    if (aCtrl.setSelectionRange) {
        aCtrl.setSelectionRange(aPos, aPos);
        aCtrl.focus();
    } else if (aCtrl.createTextRange) {
        var rng = aCtrl.createTextRange();
        rng.collapse(true);
        rng.moveStart('character', aPos);
        rng.moveEnd('character', aPos);
        rng.select();
    }
}

经过修改后的代码就可以适用于Firefox,IE,Opera的光标定位了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setCaretPosition(aCtrl, aPos) {
    if (aCtrl.setSelectionRange) {
        setTimeout(function() {
            aCtrl.setSelectionRange(aPos, aPos);
            aCtrl.focus();
        }, 0);
    } else if (aCtrl.createTextRange) {
        var rng = aCtrl.createTextRange();
        rng.collapse(true);
        rng.moveStart('character', aPos);
        rng.moveEnd('character', aPos);
        rng.select();
    }
}

Comments