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

Question

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

例如，如果一个文本框（例如输入元素，而不是文本区域）中有 50 个字符，并且我想将插入符号放在第 20 个字符之前，我该怎么做呢？

这与这个问题不同： jQuery Set Cursor Position in Text Area ，它需要 jQuery。

原文由 jonhobbs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

摘自 Josh Stdola 的 Setting keyboard caret Position in a Textbox or TextArea with 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。如果无法找到该元素，则什么都不会发生（显然）。第二个参数是插入符号位置索引。零会将键盘插入符号放在开头。如果您传递的数字大于元素值中的字符数，它将把键盘插入符号放在最后。

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

原文由 Ta01 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

答案中的链接已损坏，这个应该可以使用（所有学分都转到 blog.vishalon.net ）：

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

以防代码再次丢失，这里有两个主要功能：

 function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}

function setCaretPosition(ctrl,pos)
{
 if (ctrl.setSelectionRange)
 {
  ctrl.focus();
  ctrl.setSelectionRange(pos,pos);
 }
 else if (ctrl.createTextRange)
 {
  var range = ctrl.createTextRange();
  range.collapse(true);
  range.moveEnd('character', pos);
  range.moveStart('character', pos);
  range.select();
 }
}

原文由 eternal 发布，翻译遵循 CC BY-SA 3.0 许可协议