Sélectionnez le texte sur le focus d'entrée

J'ai une entrée 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 le ferais 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 la méthode Angular, mais la plupart des exemples que je trouve concernent une directive qui surveille une propriété modale pour un changement. Je suppose que j'ai besoin d'une directive qui surveille une entrée qui reçoit l'attention. Comment pourrais-je faire ça?

La façon de faire cela dans Angular est de créer une directive personnalisée qui effectue la sélection automatique pour vous.

module.directive('selectOnClick', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                if (!$window.getSelection().toString()) {
                    // Required for mobile Safari
                    this.setSelectionRange(0, this.value.length)
                }
            });
        }
    };
}]);

Appliquez la directive comme ceci:

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

View demo

Update1 : Dépendance jQuery supprimée.

Update2 : Restreindre comme attribut.

Update3 : fonctionne dans Safari mobile. Permet de sélectionner une partie du texte (nécessite IE> 8).

Voici une directive améliorée qui évite de resélectionner le texte lorsque l'utilisateur clique pour positionner 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;
            });
        }
    };
})

C'est une vieille réponse, pour Angular 1.x

La meilleure façon de le faire est d'utiliser la ng-clickdirective intégrée:

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

ÉDITER:

Comme JoshMB l' a gentiment rappelé; le référencement des nœuds DOM dans Angular 1.2+ n'est plus autorisé. Donc, je suis passé $event.target.select()au 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 .

Aucune des solutions proposées n'a bien fonctionné pour moi. Après une recherche rapide, j'ai trouvé ceci:

module.directive('selectOnFocus', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var focusedElement = null;

            element.on('focus', function () {
                var self = this;
                if (focusedElement != self) {
                    focusedElement = self;
                    $timeout(function () {
                        self.select();
                    }, 10);
                }
            });

            element.on('blur', function () {
                focusedElement = null;
            });
    }

  }

});

C'est un mélange de plusieurs solutions proposées, mais fonctionne à la fois sur le clic et la mise au point (pensez à l'autofocus) et permet une sélection manuelle de la valeur partielle dans l'entrée.

Pour moi, ng-click n'avait pas de sens, car vous ne pouviez jamais repositionner le curseur sans sélectionner à nouveau tout le texte, j'ai trouvé que c'était ennuyeux. Ensuite, il est préférable d'utiliser ng-focus, car le texte n'est sélectionné que si l'entrée n'était pas focalisée, si vous cliquez à nouveau pour repositionner le curseur, le texte se désélectionne simplement, comme prévu, et vous pouvez écrire entre les deux.

J'ai trouvé que cette approche était le comportement UX attendu.

Utiliser ng-focus

Option 1: code séparé

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

et en contrôleur

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

Option 2: comme alternative, vous pouvez joindre le code ci-dessus dans ce "one-liner" (je n'ai pas testé cela mais cela devrait fonctionner)

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

Dans angular 2, cela a fonctionné pour moi, à la fois dans Chrome et Firefox:

<input type="text" (mouseup)="$event.target.select()">

La réponse acceptée utilise l'événement click, mais si vous utilisez l'événement focus, seul le premier clic déclenchera l'événement et il se déclenchera également lorsqu'une autre méthode est utilisée pour se concentrer sur l'entrée (comme appuyer sur l'onglet ou appeler le focus dans le code).

Cela rend également inutile de vérifier si l'élément est déjà focalisé comme le suggère la réponse de Tamlyn.

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

Aucune directive nécessaire, ajoutez simplement du onfocus="this.select()"javascript natif à l'élément d'entrée ou à la zone de texte.

Version modifiée qui a fonctionné pour moi. Le premier clic sélectionne le texte, le second clic sur le même élément désélectionne le texte

module.directive('selectOnClick', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var prevClickElem = null; //Last clicked element
        var ignorePrevNullOnBlur = false; //Ignoring the prevClickElem = null in Blur massege function

        element.on('click', function () {
            var self = this;
            if (prevClickElem != self) { //First click on new element
                prevClickElem = self; 
                $timeout(function () { //Timer
                    if(self.type == "number")
                        self.select();
                    else
                        self.setSelectionRange(0, self.value.length)
                }, 10);
            }
            else { //Second click on same element
                if (self.type == "number") {
                    ignorePrevNullOnBlur = true;
                    self.blur();
                }
                else
                    self.setSelectionRange(self.value.length, self.value.length); //deselect and set cursor on last pos
            }
        });

        element.on('blur', function () {
            if (ignorePrevNullOnBlur == true)
                ignorePrevNullOnBlur = false; //blur called from code handeling the second click 
            else
                prevClickElem = null; //We are leaving input box
        });
    }
}

})

Le moyen le plus simple de sélectionner tout le texte sur un clic, un focus ou une tabulation est !!!:

<input (focus)="inputFocused($event)">

...

inputFocused(event: any){
    event.target.select()
}