在javascript中，如何检测光标的位置？

Question

我的光标在这里（红色闪光），我需要检测它的位置，并找到开头“{{？”以及此表达式的结尾“{{？}}”。

首先，如何找到我的光标位置？

Answer 1

要在输入字段中获取插入位置，您可以使用：

HTML

<input type="text" id="input">

JS

function getCaretPosition(input) {
  var position = 0;
  if (document.selection) { //FOR IE...
    var selrange = document.selection.createRange();
    selrange.moveStart('character', -input.value.length);
    position = selrange.text.length;
  } else if (typeof input.selectionStart !== 'undefined') { //OTHERS
    position = input.selectionStart;
  }
  return position;
}

您可以这样称呼它：

var position = getCaretPosition(document.getElementById('input'));

Answer 2

这可以通过使用可编辑内容的范围来完成。 例如：

HTML：

<p contenteditable="true">This<!--cursor--> is an editable paragraph.</p>

代码：

selection = document.getSelection();
range = selection.getRangeAt(0);
startPosition = range.startOffset;

输出：4

Answer 3

<input  type="text"  id="Javascript_example" value="{{? ...}}1{{??}}22{{?}}" onclick="getposition()">
<script>
function getposition(){

var ptr = document.getElementById('Javascript_example');
alert(ptr);

var startPosition = ptr.selectionStart;
alert(startPosition);
var endPosition = ptr.selectionEnd;
alert(endPosition);


}
</script>

Answer 4

function foo(event) {
  var x = event.clientX;     // Get the horizontal coordinate
  var y = event.clientY;     // Get the vertical coordinate
  var test = "X coords: " + x + ", Y coords: " + y;
  document.querySelector('.test').innerHTML = test;
}
document.addEventListener('mousemove',foo);

.test {
  width: 100%;
  height: 100%;
  background: #ccc;
}

<div class="test"></div>

这是你如何做到这一点的。 以下是专家提出的示例:)＆gt;＆gt; 0o0o0o0o0o0o0