乐者为王

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