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

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

这与这个问题不同:jQuery Set Cursor Position in Text Area,它需要jQuery.

推荐答案

摘自Josh Stodola的100

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

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.如果找不到元素,则不会发生任何事情(显然).第二个参数是插入符号位置索引.Zero会将键盘插入符号放在开头.如果传递的数字大于"元素"值中的字符数,则会将键盘插入符号置于末尾.

在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);

Javascript相关问答推荐

鼠标移动时更新画布

在JavaScript中,是否有一种方法可以创建自定义thable,在等待某些代码后自动触发它?

仅在React和JS中生成深色

如何访问react路由v6加载器函数中的查询参数/搜索参数

React Native平面列表自动滚动

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

字节数组通过echo框架传输到JS blob

fs. writeFile()vs fs.writeFile()vs fs.appendFile()

嵌套异步JavaScript(微任务和macrotask队列)

如何在输入元素中附加一个属性为checkbox?

Angular 订阅部分相互依赖并返回数组多个异步Http调用

您能在卸载程序(QtInsteller框架)上添加WizardPage吗?

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存?

使用Google API无法进行Web抓取

VSCode中出现随机行

如何限制显示在分页中的可见页面的数量

在JS中动态创建对象,并将其追加到HTML表中

触发异步函数后不能显示数据

当从其他文件创建类实例时,为什么工作线程不工作?

如何在Jest中模拟函数