title: How do you get the current cursor position (in a textarea) whenever the cursor or arrow key is pressed DOWN?
body: <p>I am trying to get the position of the text cursor immediately after one clicks <strong>down</strong> the mouse to reposition it. The issue is that <code>selectionStart</code> and <code>selectionEnd</code> do not return the most current position of the cursor, since the "new" position doesn't get stored until the click is <strong>released</strong>. The code snippet shows this problem when you try to reposition the caret with the mouse.</p>
  
  <p>This is strange because I can technically type at the "new" position as soon as the mouse is clicked down, but <code>selectionStart</code> still returns the old position. If the cursor position can clearly change without having to release the click, then how do you access the new position without having to wait for the <code>mouseup</code>?</p>
  
  <p>(this also seems to be a problem for tracking cursor position after keydowns)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const input = document.getElementById('myInput');
  input.addEventListener('mousedown', showposition); // click
  
  function showposition() {
    document.getElementById("output").innerHTML += " " + input.selectionStart;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="myInput"&gt;
  &lt;p id="output"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>