web-dev-qa-db-fra.com

Obtenir la position actuelle du curseur dans une zone de texte

J'ai besoin d'un code pour trouver position actuelle du curseur dans une zone de texte/zone de texte. Cela devrait fonctionner avec chrome et firefox. Voici le code que j'utilise:

<!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>

Toute suggestion?

javascriptfirefoxtextboxcursor
20
Perseus

Il semble OK en dehors de l'espace dans votre attribut ID, qui n'est pas valide, et du fait que vous remplacez la valeur de votre entrée avant de vérifier la sélection.

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()">

De plus, si vous prenez en charge IE <= 8, vous devez savoir que ces navigateurs ne prennent pas en charge selectionStart et selectionEnd.

40
Tim Down

Voici une méthode possible.

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