title: JavaScript mouseover/mousemove cusor postion without clicking in input text box
body: <p>I'm attempting to combine a JavaScript mechanism for auto placing the users cursor inside of an input box through the mouseover and mousemove listeners. </p>
  
  <p>I have an almost perfect working example here: <a href="http://codepen.io/anon/pen/doxNLm?editors=101" rel="nofollow">http://codepen.io/anon/pen/doxNLm?editors=101</a></p>
  
  <pre><code>  var current_element = document.getElementById("hover");
    current_element.onmousemove = function showCoords(evt) {
  
      var form = document.forms.form_coords;
      var parent_id = this.id;
      form.parentId.value = parent_id;
      form.pageXCoords.value = evt.pageX;
      form.pageYCoords.value = evt.pageY;
      form.layerXCoords.value = evt.layerX;
      form.layerYCoords.value = evt.layerY;
  
      function getTextWidth(text, font) {
        // re-use canvas object for better performance
        var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
        var context = canvas.getContext("2d");
        context.font = font;
        var metrics = context.measureText(text);
        return metrics.width;
      };
  
      var element_base_browser_styles = window.getDefaultComputedStyle(current_element);
      var total_text_pixal_length = getTextWidth(current_element.value, element_base_browser_styles.fontFamily + " " + element_base_browser_styles.fontSize);
  
      var add_char_pixal_lengths = 0;
  
      var myStringArray = current_element.value.split('');
      var arrayLength = myStringArray.length;
      for (var i = 0; i &lt;= arrayLength; i++) {
        var get_char_value = getTextWidth(myStringArray[i], element_base_browser_styles.fontFamily + " " + element_base_browser_styles.fontSize);
  
        add_char_pixal_lengths = add_char_pixal_lengths + (get_char_value) + 1.311111111111; //every char value is added together. 
       // console.log("Total: " + x);
  
        if ((add_char_pixal_lengths)&gt; (evt.layerX)) { 
          this.setSelectionRange(i, i);
          add_char_pixal_lengths = 0;
          break;
        }
      }
    }
  
    current_element.onmouseover = function() {
      this.focus()
    }
  </code></pre>
  
  <p>The problem I'm having is like Geosynchronous orbit; the cursor shifts out of place sometimes a few pixels (left or right).  My calculation probably sucks, but I'm not sure canvas is really the best way to do the measurement? Is there a better way?</p>
  
  <ol>
  <li>mousemove listener to receive element cursor coordinates from e.pageX </li>
  <li>font style using window.getComputedStyles(input_element)</li>
  <li>arr.split('') from input_element.text string:  x = ['a','b','c']</li>
  <li>'for loop' the array, generate a canvas and measure each characters width</li>
  <li>add all char widths  one by one until the value is greater than e.pageX</li>
  <li>set the 'for loop' iterate as the setSelectionRange(i, i)</li>
  </ol>
  
  <p>Any help or suggestions on making this better would be appreciated.  Thanks!</p>