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

例如,如果一个文本框(例如输入元素,而不是文本区域)有50个字符,我想在字符20之前放置插入符号,我该怎么做呢?

这是在区别于这个问题:jQuery设置光标位置在文本区域,这需要jQuery。


当前回答

我发现了一个简单的方法来解决这个问题,在IE和Chrome测试:

function setCaret(elemId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

将文本框id和插入符号位置传递给此函数。

其他回答

function SetCaretEnd(tID) {
    tID += "";
    if (!tID.startsWith("#")) { tID = "#" + tID; }
    $(tID).focus();
    var t = $(tID).val();
    if (t.length == 0) { return; }
    $(tID).val("");
    $(tID).val(t);
    $(tID).scrollTop($(tID)[0].scrollHeight); }

我发现了一个简单的方法来解决这个问题,在IE和Chrome测试:

function setCaret(elemId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

将文本框id和插入符号位置传递给此函数。

如果你需要聚焦一些文本框,你唯一的问题是整个文本被高亮显示,而你想要插入符号在结尾,那么在这种特定的情况下,你可以使用这个技巧来设置文本框的值为自己的焦点后:

$("#myinputfield").focus().val($("#myinputfield").val());

我稍微调整了kd7的答案,因为elem。当selectionStart恰好为0时,selectionStart将计算为false。

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}

摘自Josh Stodola的在文本框或文本区域设置键盘插入的位置用Javascript

一个泛型函数,允许您在文本框或文本区域的任何位置插入插入符号:

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。如果无法找到该元素,则什么也不会发生(显然)。第二个参数是插入符号位置索引。0会把键盘插入符号放在开头。如果传递的数字大于元素值中的字符数,则将键盘插入符放在末尾。

已在IE6及以上版本、Firefox 2、Opera 8、Netscape 9、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);