在IE中获得插入符号位置在一种情况下工作,在另一种情况下不工作

Getting caret position in IE works in one scenario, doesn't in another

本文关键字:情况下 工作 一种 另一种 IE 插入 位置 符号      更新时间:2023-09-26

我在HTML标记中有一个input元素,如下所示:

<input type="text" name="s" id="s" value="" />

我正在用乌尔都语(像一个迷你虚拟键盘)改变输入元素中的字符,通过使用jQuery的keypress:

$("#s").keypress(function(e) {
    var pos = getCaretPos('s');
    // key-mapping logic here
});

我也有一些按钮,帮助用户通过点击相应的按钮输入他们想要的乌尔都语字符。因此:

// Process clicks on buttons with class=kb-letter
$(".kb-letter").click(function() {
    var pos = getCaretPos('s');
    // logic for entering Urdu characters in 's' here
});

这是获取插入符号位置的函数。它返回s中插入符号的当前位置,然后在该位置插入新字符:

function getCaretPos(areaId) {
    var txtArea = document.getElementById(areaId);
    var pos = 0;
    var br = (document.selection ? "ie" : ((txtArea.selectionStart || txtArea.selectionStart == '0') ? "ff" : false ) );
    if (br == "ie") { 
        txtArea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtArea.value.length);
        pos = range.text.length;
    }
    else if (br == "ff") {
        pos = txtArea.selectionStart;
    }
    return pos;
}

现在,上面的getCaretPos()在Firefox 8和Chrome 17中工作良好,用于s的直接键盘输入和使用点击按钮的输入;但在Internet Explorer 8中,它只能用于直接键盘输入。如果我尝试使用鼠标点击输入一个字符,它会在位置0输入,因为在这种情况下getCaretPos()总是返回0。

我不知道出了什么问题。我是否需要以不同的方式调用getCaretPos()以响应IE的鼠标点击?

没关系。我正在使用一个无序列表,其<li> s冒充键盘按钮。由于某些原因,IE在使用它们时遇到了问题。我把<li> s换成了<button> s,现在getCaretPos()工作得很好。