Comment puis-je utiliser jQuery pour définir la position du curseur dans une zone de texte ?-js tutoriel-php.cn

Comment puis-je utiliser jQuery pour définir la position du curseur dans une zone de texte ?

Susan Sarandon

Libérer： 2024-12-15 14:07:10

original

957 Les gens l'ont consulté

How Can I Use jQuery to Set the Cursor Position in a Text Area?

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

Le positionnement du curseur dans une zone de texte peut améliorer l'expérience utilisateur, mais comment y parvenir avec jQuery ?

Dans jQuery, une fonction personnalisée appelée setCursorPosition peut être implémentée pour définir la position du curseur. Voici une version mise à jour du code que vous avez fourni :

new function($) {
  $.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();
    }
  };
}(jQuery);

Copier après la connexion

Avec cette fonction, vous pouvez définir la position du curseur comme suit :

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

Copier après la connexion

Cela positionnera le curseur au 4ème caractère dans la zone de texte lorsque l'utilisateur se concentre sur le champ, ce qui donne "abcd|efg."

Alternativement, Il existe une autre solution jQuery qui permet plus de flexibilité :

$.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();
      }
  });
};

Copier après la connexion

Cette fonction selectRange vous permet de spécifier à la fois une position de début et une position de fin pour le curseur, offrant ainsi un meilleur contrôle sur la sélection de texte :

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

Copier après la connexion

Ces solutions jQuery vous permettent de définir avec précision la position du curseur dans une zone de texte, améliorant ainsi l'interactivité de l'utilisateur.

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!