Comment définir la position du curseur dans les zones de texte à l'aide de jQuery ?

Définition de la position du curseur dans les zones de texte avec jQuery

Lorsque vous souhaitez que les utilisateurs se concentrent sur une partie spécifique d'un champ de texte, vous devrez peut-être positionner le curseur à un certain décalage à l'intérieur du champ. Pour y parvenir en utilisant jQuery, vous pouvez implémenter une fonction setCursorPosition.

$.fn.setCursorPosition = function(pos) {
  if (this.setSelectionRange) {
    this.setSelectionRange(pos, pos);
  } else if (this.createTextRange) {
    var range = this.createTextRange();
    range.collapse(true);
    if (pos < 0) {
      pos = $(this).val().length + pos;
    }
    range.moveEnd("character", pos);
    range.moveStart("character", pos);
    range.select();
  }
};

Avec cette fonction en place, vous pouvez définir la position du curseur en l'appelant avec le décalage souhaité :

$("#input").focus(function() {
  $(this).setCursorPosition(4);
});

Dans cet exemple, lorsque le champ #input reçoit le focus, le curseur sera positionné après le quatrième caractère (en comptant à partir de 0).

Une approche alternative est pour utiliser la fonction selectRange fournie dans la réponse acceptée :

$.fn.selectRange = function(start, end) {
  if (end === undefined) {
    end = start;
  }
  return this.each(function() {
    if ("selectionStart" in this) {
      this.selectionStart = start;
      this.selectionEnd = end;
    } else if (this.setSelectionRange) {
      this.setSelectionRange(start, end);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      range.moveEnd("character", end);
      range.moveStart("character", start);
      range.select();
    }
  });
};

À l'aide de cette fonction, vous pouvez positionner le curseur et sélectionner une plage de texte :

$("#elem").selectRange(3, 5); // select a range of text
$("#elem").selectRange(3); // set cursor position

Ces solutions proposent diverses méthodes pour définir la position du curseur et manipuler la sélection de texte dans les champs de texte à l'aide de jQuery.

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!