JavaScript在html文本框中设置键盘插入符的位置

Z时代
2024-01-10
分类：问答

有人知道如何将文本框中的键盘插入符移动到特定位置吗？

例如，如果一个文本框（例如，输入元素，而不是文本区域）中包含50个字符，而我想将插入号放置在字符20之前，我该如何处理？

这与以下问题有所不同：jQuery在TextArea中设置光标位置，这需要jQuery。

回答：

摘自Josh Stodola的使用Javascript在Textbox或TextArea中设置键盘插入符号的位置

通用功能，可让您在所需的文本框或文本区域的任何位置插入插入符号：

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

第一个预期参数是您希望插入键盘插入符号的元素的ID。如果找不到该元素，则不会发生任何事情（显然）。第二个参数是插入号位置索引。零将把键盘插入符号放在开头。如果您传递的数字大于elements值中的字符数，它将把键盘插入符号放在最后。

在IE6及更高版本，Firefox 2，Opera8，Netscape9，SeaMonkey和Safari上进行了测试。不幸的是，在Safari上，它无法与onfocus事件结合使用。

使用上述功能强制键盘插入符号在获得焦点时跳至页面上所有文本区域的末尾的示例：

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;
            window.onload = function() {
                if(oldLoad)
                        oldLoad();
                func();
            }
        }
    }
}
// The setCaretPosition function belongs right here!
function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');
    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }
    textAreas = null;
}
addLoadEvent(setTextAreasOnFocus);