JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div id="status">Move the caret on the text:</div>
  <textarea id="txt1" rows="20" cols="60">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt metus augue. Aliquam erat volutpat. Quisque ut libero eu sapien sagittis egestas. Cras non venenatis sapien. Proin eget nisl vel eros tristique vehicula. Nulla erat tortor, lacinia non convallis ac, fringilla ut urna. Maecenas eu nisl purus. Phasellus semper tempus fermentum. Vestibulum et rhoncus orci. Aliquam non enim non libero interdum gravida et sit amet mi. Ut a nibh eu leo dapibus luctus in sed nisi. Maecenas consectetur aliquam pharetra. Integer tristique iaculis ipsum ac iaculis. Vivamus blandit vehicula tortor, at euismod dolor rutrum quis. Vivamus non elit odio. </textarea>

CSS

#status {font-size:20px;display:block;height:40px;}

JavaScript

function getCaret(el) {
  if (el.selectionStart) {
    return el.selectionStart;
  } else if (document.selection) {
    el.focus();

    var r = document.selection.createRange();
    if (r == null) {
      return 0;
    }

    var re = el.createTextRange(),
        rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);

    return rc.text.length;
  } 
  return 0;
}


window.onload = function () {
  var textarea = document.getElementById('txt1'),
      status = document.getElementById('status');
  
  textarea.onmouseup = textarea.onkeyup = function () {
    var index = getCaret(textarea);
    var string = textarea.value;
    var symbol = string.substring(index-1,index);
    console.log(string.substring(index-1,index))
    status.innerHTML = 'clicked on <strong style="font-size:30px">' + (symbol == ' ' ? 'Space' : symbol )  + '</strong>'
     
    
  };
};