获取光标书写位置

Posted 2023-05-07

技术标签:

【中文标题】获取光标书写位置【英文标题】：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 【参考方案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，请您在 *** '***.com/questions/7745867/…'上查看这个问题仍然不是我需要的，首先我需要以（像素）为单位的位置值，因为用户可以跳转到新行，我必须检测新行。我也希望它在 js 或 reactjs 中而不是在 jquery 中

以上是关于获取光标书写位置的主要内容，如果未能解决你的问题，请参考以下文章

如何获取光标在指定窗口内的具体位置

如何从 GWT 中的 RichTextArea 获取光标位置或位置？

javascript获取以及设置光标位置

jquery 或者js 怎么获取页面光标所在的元素

contenteditable=“true“ ----＞window.getSelection() 获取光标位置 & 光标位置插入内容