Maison > interface Web > js tutoriel > Comment obtenir la position du curseur dans un champ de saisie de texte ?

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

Patricia Arquette
Libérer: 2024-12-07 10:39:11
original
823 Les gens l'ont consulté

How to Get the Caret Position in a Text Input Field?

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é :

1

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

Copier après la connexion

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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;

}

Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal