javascript - 入力テキストボックスをクリックせずにJavaScriptマウスオーバー/マウスカーソル位置を移動

Question

mouseover および mousemove リスナーを介して、入力ボックス内にユーザーのカーソルを自動的に配置するための JavaScript メカニズムを組み合わせようとしています。

ここにほぼ完璧な実例があります: http://codepen.io/anon/pen/doxNLm?editors=101

  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 <= 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)> (evt.layerX)) { 
        this.setSelectionRange(i, i);
        add_char_pixal_lengths = 0;
        break;
      }
    }
  }

  current_element.onmouseover = function() {
    this.focus()
  }

私が抱えている問題は、Geosynchronous orbit のようなものです。カーソルが数ピクセルずれることがあります (左または右)。私の計算はおそらくひどいものですが、キャンバスが実際に測定を行うための最良の方法であるかどうかはわかりませんか? より良い方法はありますか？

1. e.pageX から要素のカーソル座標を受け取る mousemove リスナー
2. window.getComputedStyles(input_element) を使用したフォント スタイル
3. arr.split('') from input_element.text 文字列: x = ['a','b','c']
4. 配列を「forループ」してキャンバスを生成し、各文字幅を計測
5. 値が e.pageX よりも大きくなるまで、すべての文字幅を 1 つずつ追加します
6. 「for ループ」反復を setSelectionRange(i, i) として設定します

これを改善するための助けや提案をいただければ幸いです。ありがとう！