获取光标书写位置答案

【问题标题】：Get cursor writing positions获取光标书写位置
【发布时间】：2018-06-17 11:30:08
【问题描述】：

是否可以在输入文本区域内获取书写光标的位置（最后一个字符的绝对 x,y 像素位置）

注意：它不仅仅是计算字符数，而是我必须处理新行，例如，如果用户键入 Enter 键（我必须以 pixels 为单位检测新位置最后一个字符

我想要这个，因为我需要在用户输入文本时显示一个带有建议的弹出窗口

如果您有 reactjs 或经典 javascript（不是 jquery）的示例，请与您的代码分享

我希望我的问题很清楚。

提前谢谢你

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/Selection

标签： javascript css reactjs

【解决方案1】：

最后我找到了解决方案：这里是 reactjs 的代码

var text = this.refs.areatext,
coords = {};
  var carPos = text.selectionEnd,
    div = document.createElement("div"),
    span = document.createElement("span"),
    copyStyle = getComputedStyle(text);

  [].forEach.call(copyStyle, function(prop){
    div.style[prop] = copyStyle[prop];
  });
  div.style.position = "absolute";
  document.body.appendChild(div);
  div.textContent = text.value.substr(0, carPos);
  span.textContent = text.value.substr(carPos) || ".";
  div.appendChild(span);
  coords = {
    "TOP": span.offsetTop,
    "LEFT": span.offsetLeft
  };

document.body.removeChild(div);

this.setState({x:coords.LEFT,y:coords.TOP})

对于 javascript

(function() {
  var text = document.querySelector(‘textarea’),
    indicator = document.querySelector(‘.indicator’),
    getCoord = function(e) {
      var carPos = text.selectionEnd,
        div = document.createElement(‘div’),
        span = document.createElement(‘span’),
        copyStyle = getComputedStyle(text),
        coords = {};
      [].forEach.call(copyStyle, function(prop){
        div.style[prop] = copyStyle[prop];
      });
      div.style.position = ‘absolute’;
      document.body.appendChild(div);
      div.textContent = text.value.substr(0, carPos);
      span.textContent = text.value.substr(carPos) || ‘.’;
      div.appendChild(span);
      coords = {
        ‘TOP’: span.offsetTop,
        ‘LEFT’: span.offsetLeft
      };
      console.log(coords);
      indicator.style.left = coords.LEFT + ‘px’;
      indicator.style.top = coords.TOP + ‘px’;
      document.body.removeChild(div);
    };
  text.addEventListener(‘input’, getCoord);
}());

【讨论】：

【解决方案2】：

请检查此代码，我已经在javascript中进行了光标检测，希望对您有所帮助。

window.onload = init;
function init() {
    if (window.Event) {
        document.captureEvents(Event.MOUSEMOVE);
    }
    document.onmousemove = getCursorXY;
}

function getCursorXY(e) {
    document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

<html>

    <body>

        <input type="text" id="cursorX" size="3"> X-position of the mouse cursor
        <br /><br />
        <input type="text" id="cursorY" size="3"> Y-position of the mouse cursor

    </body>
</html>

【讨论】：

感谢您的回复，但这不是我需要的，我需要检测文字区域内的书写光标而不是鼠标光标
@MrGildarts，请您在 stackoverflow 'stackoverflow.com/questions/7745867/…'上查看这个问题
仍然不是我需要的，首先我需要以（像素）为单位的位置值，因为用户可以跳转到新行，我必须检测新行。我也希望它在 js 或 reactjs 中而不是在 jquery 中