Sélectionnez le 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?

Je comprends que vous voulez trouver une Angulaire manière", cependant est-il une raison vous ne serait pas juste de ne <input type="text" value="test" onclick="this.select()" />?

InformationsquelleAutor Billy Coover | 2013-02-21

angularjs angularjs-directive

211

Le moyen de le faire dans Angulaire est de créer un personnalisé directive qui ne le autoselect 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)
                }
            });
        }
    };
}]);
```
Appliquer la directive comme ceci:
```
<input type="text" value="test" select-on-click />
```
Voir la démo

Update1: suppression de jQuery dépendance.

Update2: Restreindre l'attribut.

Update3: Fonctionne dans le navigateur Safari mobile. Permet de sélectionner une partie du texte (nécessite IE>8).
- Si vous voulez le faire sans jquery, changer l'élément.cliquez sur l'élément.bind('click', function() { ... } et l'élément.sélectionnez() l'élément de[0].sélectionnez()
- Belle et élégante. Je voudrais aussi explicitement limiter la directive soit appliquée comme attribut (en retournant un objet littéral et le réglage de restrict: 'A'), que la présente directive vise à étendre le comportement d'un élément existant.
- Bonne idée @EliranMalka, j'ai mis à jour la réponse.
- Vous savez quoi, cela m'a aidé sur un tout autre problème 🙂 , mais il a aidé!
- la démo fonctionne comme un charme.
- une idée de comment faire pour que sur la page ouverte, sans clic de l'utilisateur? Le problème est que la valeur par défaut est définie dans un autre contrôleur avant mon selectOnLoad directive lien(). Mais dans le lien(), bien que la portée est déjà rempli, élément DOM n'est pas encore synchronisé avec $portée, donc quand je l'appel select(), l'élément est toujours vide et rien n'est sélectionné. La seule façon de contourner que j'ai trouvé, est de $timeout, mais j'ai l'impression que peut cesser de travailler avec une nouvelle Angulaire version.
- cela fonctionne bien sur le pc/android, mais lorsque j'essaie de l'ipad, il ne semble pas fonctionner. Est-il une œuvre connue ici?
- href="http://stackoverflow.com/questions/4067469/selecting-all-text-in-html-text-input-when-clicked/4067488#4067488">apparemment, le navigateur Safari mobile a besoin de quelques légèrement différentes javascript
- Cela semble la meilleure façon de le faire, mais malheureusement, il empêche de sélectionner une partie du texte.
- J'ai toujours eu d'importants problèmes à obtenir que cela fonctionne sur le navigateur safari mobile. Pour l'un, l'exemple de code seulement à l'écoute de "cliquer" sur les événements et sur mobile safari, les événements sont des "évènements touchstart" et "touchend". J'ai également eu des problèmes avec la mise au point automatique causant la sélection à la fin, j'ai donc dû éviter le comportement par défaut sur touchend. Voici ma version modifiée de la directive. gist.github.com/infomofo/4e9828fbd886eeb226a8
- Notez que cela ne fonctionne pas sur les <input type='number'>, voir: stackoverflow.com/questions/21177489/...
- Ne fonctionne pas avec le type de courriel entrées
InformationsquelleAutor Martin
43

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;
            });
        }
    };
})
```
- Je pense que cette réponse est meilleure que l'accepté, car il permet de régler le curseur à une position dans l'entré du texte, mais, comme une directive propre champ d'application - je propose de renommer focusedElement variable isElementFocused et store true ou false
- Je reçois Uncaught TypeError: undefined n'est pas une fonction de "ce" pour .sélectionnez(); et oui jQuery 1.9.1 est inclus.
- Je suis à 3 ans de retard, mais le changement de toutes les instances de this à element[0] et cela devrait fonctionner. J'ai aussi recommandé de changer de click à focus afin que le texte sera sélectionné si l'utilisateur onglets dans l'entrée au lieu de cliquer sur elle.
InformationsquelleAutor Tamlyn
39

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

Meilleure façon de le faire est par l'utilisation de la 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.
- Aussi loin que je peux dire, ce n'est plus pris en charge. Angulaire renvoie une erreur: "Référencement nœuds DOM Angulaire expressions est interdit!". Voir ce fil pour plus d'info: groups.google.com/forum/#!topic/angulaire/bsTbZ86WAY4. La directive approche fonctionne bien, cependant.
- Vous avez raison. C'est le cas pour Angulaires 1.2+. Je vais mettre à jour la réponse.
- DOM changements doivent être fait dans la directive, ou pas?
- Pour une raison quelconque, les autres solutions ne fonctionnent pas pour moi, mais ce n'. Je pense que le problème est que j'ai déjà eu une directive sur l'élément dont j'ai été l'ajout de cet événement click pour.
- Sérieusement, même la onTextClick($event) est en train de jeter l'erreur maintenant. De côté de l'onu, la nature intuitive de cette bête, combien cela nous coûte en de la performance?
- Je suis en train de donner jusqu'à .. mon angularjs application va être plus difficile à utiliser.
- À l'aide de ng-focus permet à un utilisateur de sélectionner des sous-ensembles si ils veulent vraiment.
- Sur angulaire 6 c'est presque le même: ne remplacez ng-cliquez (clic)="onTextClick($event); et dans Votre composant onTexclick = function($event) { ...}
InformationsquelleAutor Onur Yıldırım

Aucune des solutions proposées en ce qui a bien fonctionné pour moi. Après une rapide recherche 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 des solutions proposées, mais fonctionne à la fois sur le clic et de se concentrer (pensez autofocus) et permet la sélection manuelle de la valeur partielle dans l'entrée.

D'autres solutions ne marche pas pour moi aussi. Il n'. Merci!
Erreur de syntaxe corrigé: dernier }); remplacer par: } }; });
Celui-ci travaille pour input type="number", ce qui est excellent ! Merci
Hey, cela fonctionne pour Ionique dans Android, mais pas dans iOS...aucune idée pourquoi ? Merci
Semble comme vous l'avez laissé un peu de code derrière vous lorsque vous l'a adapté à partir de onClick... quel est le point de focusedElement?

InformationsquelleAutor xaralis

12

Pour moi, ng-cliquez sur n'ont pas de sens, parce que vous ne pourrait jamais repositionner le curseur sans sélectionner tout le texte encore une fois, je trouvais que c'était fastidieux. Ensuite, il est préférable d'utiliser ng-focus, parce que le texte est sélectionné uniquement si l'entrée n'a pas été porté, si vous cliquez à nouveau pour repositionner le curseur, puis le texte il suffit de désélectionner, comme prévu, et vous pouvez écrire entre les deux.

J'ai trouvé cette approche pour les UX de comportement.

Utilisation ng-focus

Option 1: séparer le code
```
<input type="text" ng-model="content" ng-focus="onTextFocus($event)" />
```
et contrôleur de
```
$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 tester, mais ça devrait fonctionner)
```
<input type="text" ng-model="content" ng-focus="$event.target.select()" />
```
- Simple et efficace. Cela permet aussi de positionner votre curseur dans le texte sélectionné, comme indiqué ci-dessus.
InformationsquelleAutor jperelli
6

Accepté la réponse est à l'aide de l'événement click toutefois, si vous utilisez l'accent cas, seul le 1er clic déclenche l'événement et il a également déclenché lorsqu'une autre méthode est utilisée pour se concentrer sur l'entrée (comme le fait de frapper onglet ou en appelant à se concentrer dans le code).

Cela rend également nécessaire de vérifier si l'élément est déjà concentré comme Tamlyn réponse suggère.
```
app.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('focus', function () {
                this.select();
            });
        }
    };
});
```
- Dans Firefox 38.0.5 cliquant dans le milieu du texte sélectionne d'abord, mais ensuite supprime la sélection, donc cela ne fonctionnera pas.
- Cela ne va pas probablement travailler de façon constante, sans retarder this.select.
InformationsquelleAutor OrangeKing89
6

Angulaire 2, cela a fonctionné pour moi, à la fois dans Chrome & Firefox:
```
<input type="text" (mouseup)="$event.target.select()">
```
- Simple et sympathique et a travaillé pour moi aussi 🙂 Merci à vous.
InformationsquelleAutor guenam
1

Pas de directives nécessaires, il suffit d'ajouter onfocus="this.select()" javascript natif à l'entrée de l'élément ou la zone de texte.

InformationsquelleAutor Adam Reis

Version modifiée qui a fonctionné pour moi.
Premier clic sélectionne le texte, cliquez à nouveau sur le même élément de désélectionner 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
        });
    }
}

})

InformationsquelleAutor Ola

Vous devez vous connecter pour publier un commentaire.