首页 > web前端 > js教程 > 如何以编程方式将光标定位在 HTML 文本框中?

如何以编程方式将光标定位在 HTML 文本框中?

DDD
发布: 2024-12-10 12:40:14
原创
1044 人浏览过

How Can I Programmatically Position the Cursor in an HTML Textbox?

在 HTML 文本框中定位键盘插入符

要在文本框中移动键盘插入符,可以使用 JavaScript 定位特定位置。

通用功能:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if (elem) {
        if (elem.createTextRange) {  // IE specific
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        } else if (elem.selectionStart) {
            elem.focus();
            elem.setSelectionRange(caretPos, caretPos);
        } else {
            elem.focus();  // Fallback for browsers not supporting setSelectionRange
        }
    }
}
登录后复制

用法:

  • elemId:要定位的文本框的 ID
  • caretPos: 所需的插入符位置(从头开始的字符)

示例:

要在文本框中的字符 20 之前设置插入符号 50字符:

setCaretPosition('myTextbox', 20);
登录后复制

兼容性:

  • 已在 IE6、Firefox 2、Opera 8、Netscape 9、SeaMonkey 和 Safari 上测试(Safari 中的 Safari 除外)与 组合onfocus)

附加说明:

您还可以使用此代码(在 addLoadEvent 中)强制插入符跳转到页面焦点上所有文本区域的末尾函数):

for (var i = 0; i < textAreas.length; i++) {
    textAreas[i].onfocus = function() {
        setCaretPosition(this.id, this.value.length);
    }
}
登录后复制

以上是如何以编程方式将光标定位在 HTML 文本框中?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板