title: Find out the 'line' (row) number of the cursor in a textarea
body: <p>I would like to find out and keep track of the 'line number' (rows) of the cursor in a textarea. (The 'bigger picture' is to parse the text on the line every time a new line is created/modified/selected, if of course the text was not pasted in. This saves parsing the whole text un-necessarily at set intervals.)</p>
  
  <p>There are a couple of posts on StackOverflow however none of them specifically answer my question, most questions are for cursor position in pixels or displaying lines numbers besides the textarea.</p>
  
  <p>My attempt is below, it works fine when starting at line 1 and not leaving the textarea. It fails when clicking out of the textarea and back onto it on a different line. It also fails when pasting text into it because the starting line is not 1. </p>
  
  <p>My JavaScript knowledge is pretty limited.</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;DEVBug&lt;/title&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var total_lines = 1; // total lines
      var current_line = 1; // current line
      var old_line_count;
  
      // main editor function
      function code(e) {
  
          // declare some needed vars
          var keypress_code = e.keyCode; // key press
          var editor = document.getElementById('editor'); // the editor textarea
          var source_code = editor.value; // contents of the editor
  
          // work out how many lines we have used in total    
              var lines = source_code.split("\n");
              var total_lines = lines.length;
  
      // do stuff on key presses
      if (keypress_code == '13') { // Enter
          current_line += 1;
      } else if (keypress_code == '8') { // Backspace
          if (old_line_count &gt; total_lines) { current_line -= 1; }
      } else if (keypress_code == '38') { // Up
          if (total_lines &gt; 1 &amp;&amp; current_line &gt; 1) { current_line -= 1; }
      } else if (keypress_code == '40') { // Down
          if (total_lines &gt; 1 &amp;&amp; current_line &lt; total_lines) { current_line += 1; }
      } else {
          //document.getElementById('keycodes').innerHTML += keypress_code;
      }
  
      // for some reason chrome doesn't enter a newline char on enter
      // you have to press enter and then an additional key for \n to appear
      // making the total_lines counter lag.
      if (total_lines &lt; current_line) { total_lines += 1 };
  
      // putput the data
      document.getElementById('total_lines').innerHTML = "Total lines: " + total_lines;
      document.getElementById('current_line').innerHTML = "Current line: " + current_line;
  
      // save the old line count for comparison on next run
      old_line_count = total_lines;
  
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;textarea id="editor" rows="30" cols="100" value="" onkeydown="code(event)"&gt;&lt;/textarea&gt;
  &lt;div id="total_lines"&gt;&lt;/div&gt;
  &lt;div id="current_line"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>