Obtenir la position actuelle du curseur dans une zone de texte

J'ai besoin d'un code pour trouver la 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?

Il semble juste en dehors de l'espace dans votre attribut ID, ce qui n'est pas valide, et le fait que vous remplacez la valeur de votre saisie 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); }

En outre, si vous soutenez IE <= 8, vous devez être conscient que ces navigateurs ne prennent pas en charge selectionStart et selectionEnd .

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