如何确定光标在表单元素中的字符串中的位置？ [复制]

Posted 2023-05-07

【中文标题】如何确定光标在表单元素中的字符串中的位置？ [复制]

【英文标题】：How to determine where cursor is in a string in a form element? [duplicate]

【发布时间】：2012-01-28 20:55:46

【问题描述】：

我有意见。

<input name="inputName" id="inputId" value="Hello" />

假设光标在 hello 中的 e 之后，如下所示：

He|llo

如何确定光标在该字符串中的位置？意思是，我怎样才能让它告诉我光标就在字符串1之后（或字符串2之前）？

编辑：实际上，我的最终目标是确定光标是否位于字符串的末尾。我不需要知道它是否在中间。如果它在字符串的末尾，我正在捕获箭头按下并将使其跳转到下一个表单元素。如果它在开头或中间，那么我不会跳到下一个表单元素。在箭头键上跳转已经可以了，但是无论光标在字符串中的哪个位置，它都会跳转。

【参考方案1】：

这是一个无需外部依赖即可满足您需求的解决方案：http://jsfiddle.net/imsky/ZH5JL/

假设字段#inputId 和#secondField：

var field = document.getElementById("inputId");

function checkCaret(f) 
    if (caretPos(f) == field.value.length) 
        document.getElementById("secondField").focus();
    


function caretPos(f) 
    if (f.createTextRange) 
        var r = document.selection.createRange().duplicate();
        r.moveEnd("character", f.value.length);
        return r.text == "" ? f.value.length : f.value.lastIndexOf(r.text)
     else return f.selectionStart;


field.onkeyup = function() 
    checkCaret(this)
;
field.onkeydown = function() 
    checkCaret(this)
;
field.onfocus = function() 
    checkCaret(this)
;

【讨论】：

我找到并使用了***.com/questions/263743/…，它就像一个魅力！不过感谢您的帮助！

【参考方案2】：

如果您使用 jQuery，则有一个插件 - fieldselection。它支持开始/结束，选定的文本等。

【讨论】：

对于这个任务，以及浏览器的兼容性，使用 jQuery 会更好。

jQuery 不是一个选项，不幸的是。原型也不是。

我所需要的只是指向写入方向。我应该看 Range 还是其他？