121 votes

Sélectionner du texte sur le focus d’entrée

J'ai une saisie de texte. Lorsque l'entrée reçoit le focus, je veux sélectionner le texte à l'intérieur de l'entrée.

Avec jQuery, je voudrais faire de cette façon:

<input type="text" value="test" />
$("input[type=text]").click(function() {
    $(this).select();
    // would select "test" in this example
});

J'ai cherché partout pour essayer de trouver l'angle de façon mais la plupart des exemples, je suis la recherche de traiter avec une directive qui est de regarder un modal de la propriété pour un changement. Je suppose que j'ai besoin d'une directive qui est de regarder pour une entrée qui reçoit le focus. Comment dois-je procéder?

217voto

Martin Points 4085

Le moyen de le faire dans Angulaire est de créer un personnalisé directive qui ne le autoselect pour vous.

module.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                this.select();
            });
        }
    };
});

Appliquer la directive comme ceci:

<input type="text" value="test" select-on-click />

Démonstration en direct.

Update1: suppression de jQuery dépendance.

Update2: Restreindre l'attribut

44voto

Tamlyn Points 2728

Voici un renforcement de la directive qui évite de réactiver le texte lorsque l'utilisateur clique sur pour placer le curseur dans la zone de saisie.

module.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            var focusedElement;
            element.on('click', function () {
                if (focusedElement != this) {
                    this.select();
                    focusedElement = this;
                }
            });
            element.on('blur', function () {
                focusedElement = null;
            });
        }
    };
})

41voto

Onur Yıldırım Points 5566

Meilleure façon de le faire est par l'utilisation de l' ng-click intégré dans la directive:

<input type="text" ng-model="content" ng-click="$event.target.select()" />

EDIT:

Comme JoshMB a gentiment rappelé; référencement des nœuds DOM Angulaire 1.2+ n'est plus autorisée. Donc, j'ai déplacé $event.target.select() dans le contrôleur:

<input type="text" ng-model="content" ng-click="onTextClick($event)" />

Puis dans votre contrôleur:

$scope.onTextClick = function ($event) {
    $event.target.select();
};

Voici un exemple de violon.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X