获取文本输入字段中的光标位置（以字符为单位）

211

如何从输入字段中获得插入符的位置？

我已经通过Google找到了一些零散的信息，但没有任何防弹证据。

基本上像jQuery插件之类的东西是理想的，所以我可以简单地做

$("#myinput").caretPosition()
javascript  jquery  html 
— 马克B29
source
2
尝试搜索“光标位置”，这将为您带来更多成功，以及一些与此相关的主题。
— 亚历克
1
— CMS 2010年
2
@CMS在中查找职位比在中查找职位<input>更简单<textarea>。
— Andrew Mao
1
@AndrewMao：如果滚动文本并且插入符号是过去的size字符，则会更困难。
— Dan Dascalescu 2014年
@alec：我同意搜索游标而不是插入符号可能会产生更多结果。正如在其他地方指出的那样，我了解到插入符号是更合适的术语。一光标表示在任何一个位置，而插入符文本中明确表示的位置。
— Suncat2000

Answers:

247

更新更容易：

field.selectionStart 在此答案中使用示例。

感谢@commonSenseCode指出这一点。

旧答案：

找到了这个解决方案。不是基于jquery的，但是将其集成到jquery中没有问题：

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}
— 贝兹马克斯
source
9
else if (oField.selectionStart || oField.selectionStart == '0')可能是else if (typeof oField.selectionStart==='number')
— 2013年
“ oField.focus（）”的概念是什么？没有这条线对我有用。如果在输入上使用blur事件并在回调中执行该函数，请小心。
— Kirill Reznikov
您是否正在IE上进行测试？整个if部分仅在IE上执行。在IE中，只有全局选择，这就是为什么它document.selection不是field.selection或某些原因。另外，有可能在IE 7中（不知道在8+中是否仍然有可能）选择某些内容，然后在不丢失选择的情况下将TAB移出字段。这样，当选择了文本但未将字段聚焦时，document.selection将返回零选择。因此，作为解决此错误的方法，您必须在阅读之前先关注元素document.selection。
— bezmax
chrome和firefox总是得到0
— Kaushik Thanki
117

很好，非常感谢Max。

如果有人要使用它，我已将其功能包装在jQuery中。

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);
— 马克B29
source
3
不input = $(this).get(0)一样input = this吗？
— 麦克风
4
@Mic不，不在jQuery插件中。在插件中this是指完整包装的集合。但是他的代码仍然是错误的，应该是this.get(0)。他的代码可能仍然有效，因为重新包装已包装的集不起作用。
— CHEV
1
这给了我错误的信息。输入文本时，我正在查看光标位置。我的小提琴展示了这一点： jsfiddle.net/fallenreaper/TSwyk
— Fallenreaper 2013年
1
当输入为数字类型时，Firefox会在input.selectionStart上生成NS_ERROR_FAILURE，将其包装在try {} catch {}中？
— niall.campbell，2014年
如果您添加函数的用法，这对新蜜蜂将很好
— Muhammad Omer Aslam，
98

好简单

更新的答案

使用时selectionStart，它与所有主流浏览器兼容。

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})
<input id="foobar" />
展开摘要

更新：仅当未定义任何类型或type="text"在输入上时，此方法才有效。

— 常识代码
source
2
如果我使用鼠标更改位置，则不会在控制台中打印该位置。有办法解决吗？
— 尤金·巴尔斯基
3
@EugeneBarsky只需为click事件添加一个新的事件侦听器。您可以.selectionStart随时（document.getElementById('foobar').selectionStart）检查属性，它不必位于事件侦听器中。
— JJJ
3
很棒，但是当输入类型为数字时，在Firefox或Chrome中不起作用。
— 亚当·R·格雷，
26

得到了一个非常简单的解决方案。尝试以下带有验证结果的代码-

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

我给你fiddle_demo

— 拉杰什·保罗（Rajesh Paul）
source
13
slice这是一个相对昂贵的操作，它不会为“解决方案”增加任何内容- el.selectionStart相当于切片的长度；只是返回。而且，其他解决方案更复杂的原因是因为它们与不支持的其他浏览器打交道selectionStart。
— mpen
我辞掉了必须使用具有这样的变量名的代码的工作。
— Michael Scheper
@Michael Scheper-您的意思是元素的“ el”和价值的“ val”？这些都是很普通的...
— user2782001 '16
6
@ user2782001：我打错了—我主要关心的是函数名称。f1与“ user2782001”一样有意义。😉–
— Michael Scheper
14 
   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);
— 乔治
source
10

这里发布了一些很好的答案，但是我认为您可以简化代码并跳过对inputElement.selectionStart支持的检查：仅IE8和更早版本不支持它（请参阅文档）当前浏览器使用率不到1％的）。

var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;

// and if you want to know if there is a selection or not inside your input:

if (input.selectionStart != input.selectionEnd)
{
    var selectionValue =
    input.value.substring(input.selectionStart, input.selectionEnd);
}
— 微核
source
2

也许除了光标位置之外，您还需要一个选定的范围。这是一个简单的函数，您甚至不需要jQuery：

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

假设您想在输入更改或鼠标移动光标位置时在输入上调用它（在本例中，我们使用jQuery .on()）。出于性能方面的考虑，如果事件不断涌入，最好添加setTimeout()或添加下划线之类的东西_debounce()：

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

如果您想尝试一下，这是一个小提琴：https : //jsfiddle.net/Dhaupin/91189tq7/

— 陶品
source
0 

const inpT = document.getElementById("text-box");
const inpC = document.getElementById("text-box-content");
// swch gets  inputs .
var swch;
// swch  if corsur is active in inputs defaulte is false .
var isSelect = false;

var crnselect;
// on focus
function setSwitch(e) {
  swch = e;
  isSelect = true;
  console.log("set Switch: " + isSelect);
}
// on click ev
function setEmoji() {
  if (isSelect) {
    console.log("emoji added :)");
    swch.value += ":)";
    swch.setSelectionRange(2,2 );
    isSelect = true;
  }

}
// on not selected on input . 
function onout() {
  // الافنت  اون كي اب 
  crnselect = inpC.selectionStart;
  
  // return input select not active after 200 ms .
  var len = swch.value.length;
  setTimeout(() => {
   (len == swch.value.length)? isSelect = false:isSelect = true;
  }, 200);
}
<h1> Try it !</h1>
    
		<input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box" size="20" value="title">
		<input type="text" onfocus = "setSwitch(this)"  onfocusout = "onout()"  id="text-box-content" size="20" value="content">
<button onclick="setEmoji()">emogi :) </button>
展开摘要

— 奥马尔·巴赫什（Omar Bakhsh）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.