Comment obtenir la position du curseur dans un champ de saisie de texte ?

Comment récupérer la position du curseur dans un champ de saisie de texte

Obtenir la position du curseur dans un champ de saisie de texte est essentiel pour diverses tâches, tels que la validation de formulaire et l'édition de texte. Le framework jQuery fournit une solution simple à ce problème.

Méthode jQuery :

Le plugin caretPosition() est un moyen pratique de récupérer la position du curseur. Appelez simplement la fonction suivante sur le champ de saisie souhaité :

$("input#myInput").caretPosition();

Cette méthode renvoie la position du curseur sous forme de valeur entière, représentant l'index des caractères dans le champ de saisie.

Natif Méthodes du navigateur :

Vous pouvez également utiliser des méthodes de navigateur natives pour récupérer la position du curseur. Ces méthodes varient selon le navigateur, mais voici les plus courantes :

• Internet Explorer : Utilisez la propriété sélectionStart du champ de saisie.
• Firefox : Utilisez les propriétés selectionStart et selectionEnd de l'entrée field.

Exemple :

L'exemple suivant montre comment récupérer la position du curseur à l'aide de JavaScript natif :

function getCaretPosition(inputField) {
  // Initialize caret position to 0
  var caretPos = 0;

  // IE support
  if (document.selection) {
    inputField.focus();
    
    // Get empty selection range to find cursor position
    var selectionRange = document.selection.createRange();
    selectionRange.moveStart('character', -inputField.value.length);
    
    // Caret position is the length of the selection
    caretPos = selectionRange.text.length;
  }

  // Firefox support
  else if (inputField.selectionStart || inputField.selectionStart == '0') {
    // Caret position is the selection start or end, depending on the direction
    caretPos = inputField.selectionDirection == 'backward' ? inputField.selectionStart : inputField.selectionEnd;
  }

  return caretPos;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!