Maison > interface Web > js tutoriel > Comment définir la position du curseur ou sélectionner du texte dans une zone de texte à l'aide de jQuery ?

Comment définir la position du curseur ou sélectionner du texte dans une zone de texte à l'aide de jQuery ?

Barbara Streisand
Libérer: 2024-12-15 13:35:14
original
854 Les gens l'ont consulté

How to Set the Cursor Position or Select Text in a Text Area Using jQuery?

Comment définir la position du curseur dans une zone de texte à l'aide de jQuery

La fonction $.fn.selectRange() vous permet de définir facilement la position du curseur ou sélectionnez une plage de texte dans une zone de texte à l'aide de jQuery.

Voici comment utiliser it :

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

Avec cette fonction, vous pouvez définir la position du curseur en fournissant un seul argument, comme ceci :

$('#elem').selectRange(3); // set cursor position
Copier après la connexion

Ou, vous pouvez sélectionner une plage de texte en fournissant deux arguments :

$('#elem').selectRange(3,5); // select a range of text
Copier après la connexion

Cette fonction fonctionne en vérifiant si les propriétés selectionStart et selectionEnd sont prises en charge par le navigateur. Si tel est le cas, il les utilise pour définir la position du curseur ou la plage de sélection. Sinon, il utilise la méthode setSelectionRange(), prise en charge par la plupart des navigateurs. Enfin, si aucune de ces méthodes n'est disponible, la fonction revient à utiliser la méthode createTextRange(), disponible dans Internet Explorer.

Voici quelques exemples pratiques d'utilisation de cette fonction :

  • Sélectionnez tout le texte dans une zone de texte :
$('#elem').selectRange(0, $('#elem').val().length);
Copier après la connexion
  • Placez le curseur à la fin du texte dans une zone de texte :
$('#elem').selectRange($('#elem').val().length);
Copier après la connexion
  • Sélectionnez une plage de texte spécifique dans une zone de texte :
$('#elem').selectRange(3, 7);
Copier après la connexion

Vous pouvez trouver des démos en direct de cette fonction sur JsFiddle et JsBin.

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