Get cursor writing positions

Question

Is it possible to get the positions of cursor of writing (absolute x,y pixels positions of the last character) inside the input textarea

Note: its not just count number of characters, but I have to deal with new lines, for example, if the user type the Enter key (I have to detect the new position in pixels of the last character

I want this because i need to display a popup with suggestions while users type texts

if you have an example in reactjs or in classic javascript (not jquery) please share with your code

i hope that my question was clear.

Thank you in advance

https://developer.mozilla.org/en-US/docs/Web/API/Selection – Serge K. Jan 08 '18 at 13:15 — Serge K., Jan 08 '18 at 13:15

MrGildarts · Accepted Answer · 2018-01-08T14:50:49.957

Finally i found a solution: here the code for 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);
}());

score 0 · Answer 2 · answered Jan 08 '18 at 13:25

0

Please check this code, i have made cursor detection in javascript, hope will help you.

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>

answered Jan 08 '18 at 13:25

Sanjay Kumar Singh

937
4
9

Thank you for your reply, but this is not what I need , I need to detect the cursor of writing and not the cursor of the mouse inside the textarea – MrGildarts Jan 08 '18 at 13:28
@MrGildarts, please can you review this question on stackoverflow 'https://stackoverflow.com/questions/7745867/how-do-you-get-the-cursor-position-in-a-textarea' – Sanjay Kumar Singh Jan 08 '18 at 13:33
Still not what i need, first i need the value of the position in (pixels) because the user can jumb to new line and i have to detect the new line. also i want it in js or reactjs and not in jquery – MrGildarts Jan 08 '18 at 13:48

Get cursor writing positions

2 Answers2