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

IT技术 javascript textbox input
2021-01-27 10:18:39

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

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

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

6个回答

摘自 Josh Stodola's 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);
if(elem.selectionStart) 正如 jhnns 的回答所指出的那样,在 selectionStart 为 0 时会中断。
2021-03-14 10:18:39
适用于 IE9、FF25,但不适用于 Chrome 30。总比没有好!
2021-03-31 10:18:39
博客链接已死。
2021-03-31 10:18:39
这对我不起作用。当我单击实际的文本框时,我希望插入符号位置在开头。查看我的小提琴jsfiddle.net/khx2w
2021-04-01 10:18:39
setCaretPosition 函数工作得很好。但是,您的 addActionHandler 函数没有。但即使没有那个,我也无法让光标移动到焦点上。最有可能的是,这是因为浏览器根据单击的位置自行设置了光标位置。据我所知,似乎没有办法解决这个问题,但我可能完全错了。
2021-04-04 10:18:39

答案中的链接已损坏,这个应该可以工作(所有学分都转到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();
 }
}
+1 为基本功能,但必须进行一些调整使用范围方法时,必须从“pos”中减去行数。
2021-03-26 10:18:39

由于我实际上真的需要这个解决方案,而典型的基线解决方案(聚焦输入 - 然后将值设置为等于自身不能跨浏览器工作,我花了一些时间调整和编辑所有内容以使其正常工作。以@ kd7的代码为基础,这是我想出的。

享受!适用于 IE6+、Firefox、Chrome、Safari、Opera

跨浏览器插入符号定位技术(例如:将光标移动到END)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

肉和土豆基本上是@ kd7的 setCaretPosition ,最大的调整是if (el.selectionStart || el.selectionStart === 0),在 firefox 中, selectionStart 从0开始,当然在布尔值中它变成了 False,所以它在那里打破了。

在 chrome 中,最大的问题是仅仅给出它.focus()是不够的(它一直选择所有的文本!)因此,我们el.value = el.value;在调用我们的函数之前将它自己的值设置为它自己,现在它拥有了输入以使用selectionStart

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}
@elad.chen 抱歉回复太晚了!只需将该事件更改为.onclick而不是.onfocus在您的 search_field_focus 函数中
2021-03-12 10:18:39
el.value = el.value; [...] if(el !== null)- 我会交换这两行。如果el为空,el.value = el.value则会失败,因此该行应该在if.
2021-03-13 10:18:39
@mcpDESIGNS 当焦点集中在文本输入上时,我正在尝试使用此功能,但我无处可去,您能否帮助使用纯 JavaScript 应用此功能?
2021-03-22 10:18:39
@mcpDESIGNS 我想在元素被聚焦后立即将光标放在字段的开头。见小提琴:jsfiddle.net/KuLTU/3
2021-04-01 10:18:39
@elad.chen 您是否试图在他们专注于文本框后立即将它们定位到文本框的末尾?
2021-04-06 10:18:39

我稍微调整了 kd7 的答案,因为当 selectionStart 偶然为 0 时,elem.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);
        }
    }
}

我找到了一个简单的方法来解决这个问题,在 IE 和 Chrome 中进行了测试:

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

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

短而优雅
2021-03-11 10:18:39