web-dev-qa-db-ja.com

テキストボックス内の現在のカーソル位置を取得する

textbox/textareaのカーソルの現在位置を見つけるためのコードが必要です。 chromeとfirefoxで動作するはずです。以下は私が使用しているコードです：

<!DOCTYPE html>
<html>
  <head>
    <script>
      function textbox()
      {
        document.getElementById('Javascript_example').value = document.activeElement.id;
        var ctl = document.getElementById('Javascript_example');
        alert(ctl);

        var startPos = ctl.selectionStart;
        alert(startPos);
        var endPos = ctl.selectionEnd;
        alert(endPos);
      }
    </script>
  </head>
  <body>

    <input id="Javascript_example" name="one" type="text" value="Javascript_example" onclick="textbox()">

  </body>
</html>

なにか提案を？

javascriptfirefoxtextboxcursor
20
Perseus

有効ではないID属性のスペースと、選択をチェックする前に入力の値を置き換えているという事実は別として、問題はありません。

_function textbox()
{
        var ctl = document.getElementById('Javascript_example');
        var startPos = ctl.selectionStart;
        var endPos = ctl.selectionEnd;
        alert(startPos + ", " + endPos);
}_
<input id="Javascript_example" name="one" type="text" value="Javascript example" onclick="textbox()">

また、IE <= 8をサポートしている場合、これらのブラウザーはselectionStartおよびselectionEndをサポートしていないことに注意する必要があります。

40
Tim Down

考えられる1つの方法を次に示します。

function isMouseInBox(e) {
  var textbox = document.getElementById('textbox');

  // Box position & sizes
  var boxX = textbox.offsetLeft;
  var boxY = textbox.offsetTop;
  var boxWidth = textbox.offsetWidth;
  var boxHeight = textbox.offsetHeight;

  // Mouse position comes from the 'mousemove' event
  var mouseX = e.pageX;
  var mouseY = e.pageY;
  if(mouseX>=boxX && mouseX<=boxX+boxWidth) {
    if(mouseY>=boxY && mouseY<=boxY+boxHeight){
       // Mouse is in the box
       return true;
    }
  }
}

document.addEventListener('mousemove', function(e){
    isMouseInBox(e);
})
5
Evan Shortiss