Question

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

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

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

如果你在reactjs或经典javascript（不是jquery）中有一个例子，请与你的代码分享

我希望我的问题很明确。

提前谢谢

Answer 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})

for 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);
}());

Answer 2

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

＆＃13;

PrincipalComponent

＆＃13;

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);
}

＆＃13;

获取光标写入位置

2 个答案: