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/textarea. Il 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?

source d'informationauteur Perseus

  1. 30

    Ça à l'air bon en dehors de l'espace dans votre attribut ID qui n'est pas valide, et le fait que vous êtes en remplaçant la valeur de votre entrée avant de vérifier la sélection.

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

    JavaScript:

    function textbox()
{
    var ctl = document.getElementById('Javascript_example');
    var startPos = ctl.selectionStart;
    var endPos = ctl.selectionEnd;
    alert(startPos + ", " + endPos);
}

    Aussi, si vous êtes soutenir IE <= 8, vous devez être conscient du fait que les navigateurs ne prennent pas en charge selectionStart et selectionEnd.

  2. 4

    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);
})