Maison > interface Web > js tutoriel > Comment puis-je définir la position du curseur dans une zone de texte jQuery ?

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

DDD
Libérer: 2024-12-28 05:55:13
original
199 Les gens l'ont consulté

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

jQuery Définir la position du curseur dans la zone de texte

Défi :

Besoin d'une méthode pour définir la position du curseur dans un texte zone en utilisant jQuery. Le comportement souhaité est de positionner le curseur à un décalage spécifique lorsque le champ est focalisé.

Solution jQuery :

$.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();
  }
};
Copier après la connexion

Utilisation :

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});
Copier après la connexion

Cela positionnerait le curseur après le quatrième caractère du texte champ.

Solution alternative :

$.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

Cela permet une sélection de texte plus polyvalente, y compris la sélection d'une plage de caractères :

$('#elem').selectRange(3, 5); // select a range of text
$('#elem').selectRange(3); // set cursor position
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!

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal