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
Barbara Streisandoriginal
2024-12-15 13:35:14856parcourir

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

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

$('#elem').selectRange(3); // set cursor position

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

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

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);
  • Placez le curseur à la fin du texte dans une zone de texte :
$('#elem').selectRange($('#elem').val().length);
  • Sélectionnez une plage de texte spécifique dans une zone de texte :
$('#elem').selectRange(3, 7);

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!

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