Seleziona il testo sullo stato attivo dell'input

Ho un input di testo. Quando l'input riceve il focus, desidero selezionare il testo all'interno dell'input.

Con jQuery lo farei in questo modo:

<input type="text" value="test" />

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

Ho cercato in giro per cercare di trovare il modo angolare, ma la maggior parte degli esempi che sto trovando hanno a che fare con una direttiva che sta guardando una proprietà modale per un cambiamento. Presumo di aver bisogno di una direttiva che cerchi un input che riceva il focus. Come potrei farlo?

Il modo per farlo in Angular è creare una direttiva personalizzata che esegue la selezione automatica per te.

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

Applica la direttiva in questo modo:

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

View demo

Update1 : dipendenza jQuery rimossa.

Update2 : limita come attributo.

Update3 : funziona in Safari mobile. Permette la selezione di parte del testo (richiede IE> 8).

Ecco una direttiva migliorata che evita di riselezionare il testo quando l'utente fa clic per posizionare il cursore nella casella di input.

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

Questa è una vecchia risposta, per Angular 1.x

Il modo migliore per farlo è usare la ng-clickdirettiva incorporata:

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

MODIFICARE:

Come JoshMB ha gentilmente ricordato; non è più consentito fare riferimento ai nodi DOM in Angular 1.2+. Quindi, sono passato $event.target.select()al controller:

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

Quindi nel tuo controller:

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

Ecco un esempio di violino .

Nessuna delle soluzioni proposte ha funzionato bene per me. Dopo una rapida ricerca mi è venuto in mente questo:

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

  }

});

È un mix di diverse soluzioni proposte, ma funziona sia su click che su focus (si pensi all'autofocus) e consente la selezione manuale del valore parziale in ingresso.

Per me, ng-click non aveva senso, perché non si poteva riposizionare il cursore senza selezionare di nuovo tutto il testo, ho trovato che questo era fastidioso. Quindi è meglio usare ng-focus, perché il testo è selezionato solo se l'input non era focalizzato, se fai di nuovo clic per riposizionare il cursore, il testo viene deselezionato, come previsto, e puoi scrivere in mezzo.

Ho trovato questo approccio come il comportamento UX previsto.

Usa ng-focus

Opzione 1: codice separato

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

e nel controller

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

Opzione 2: in alternativa puoi unire il codice sopra in questo "one-liner" (non l'ho testato ma dovrebbe funzionare)

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

In angular 2, questo ha funzionato per me, sia in Chrome che in Firefox:

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

La risposta accettata sta usando l'evento click, tuttavia se usi l'evento focus, solo il primo clic attiverà l'evento e si attiva anche quando viene utilizzato un altro metodo per concentrarsi sull'input (come premere tab o chiamare il focus nel codice).

Ciò inoltre rende superfluo controllare se l'elemento è già focalizzato come suggerisce la risposta di Tamlyn.

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

Non sono necessarie direttive, basta aggiungere onfocus="this.select()"javascript nativo all'elemento di input o all'area di testo.

Versione modificata che ha funzionato per me. Il primo clic seleziona il testo, il secondo clic sullo stesso elemento deseleziona il testo

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

})

Il modo più semplice per selezionare tutto il testo su clic o focus o tab è !!!:

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

...

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