Seleccionar texto en foco de entrada

Tengo una entrada de texto. Cuando la entrada recibe el foco, quiero seleccionar el texto dentro de la entrada.

Con jQuery lo haría de esta manera:

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

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

He buscado alrededor para tratar de encontrar la forma Angular, pero la mayoría de los ejemplos que estoy encontrando están tratando con una directiva que está viendo una propiedad modal para un cambio. Supongo que necesito una directiva que esté pendiente de una entrada que reciba atención. ¿Como podría hacerlo?

La forma de hacer esto en Angular es crear una directiva personalizada que haga la selección automática por usted.

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

Aplica la directiva así:

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

View demo

Actualización 1 : Se eliminó la dependencia de jQuery.

Actualización2 : Restringir como atributo.

Actualización3 : Funciona en Safari móvil. Permite seleccionar parte del texto (requiere IE> 8).

Aquí hay una directiva mejorada que evita volver a seleccionar el texto cuando el usuario hace clic para colocar el cursor en el cuadro de entrada.

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

Esta es una vieja respuesta, para Angular 1.x

La mejor manera de hacerlo es utilizando la ng-clickdirectiva integrada:

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

EDITAR:

Como JoshMB ha recordado amablemente; ya no se permite hacer referencia a nodos DOM en Angular 1.2+. Entonces, me mudé $event.target.select()al controlador:

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

Luego en su controlador:

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

Aquí hay un ejemplo de violín .

Ninguna de las soluciones propuestas funcionó bien para mí. Después de una investigación rápida, se me ocurrió esto:

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

  }

});

Es una combinación de varias soluciones propuestas, pero funciona tanto en clic como en enfoque (piense en el enfoque automático) y permite la selección manual de valor parcial en la entrada.

Para mí, ng-click no tenía sentido, porque nunca podías reposicionar el cursor sin seleccionar todo el texto nuevamente, encontré que esto era molesto. Entonces es mejor usar ng-focus, porque el texto se selecciona solo si la entrada no estaba enfocada, si hace clic nuevamente para reposicionar el cursor, el texto simplemente deselecciona, como se esperaba, y puede escribir en el medio.

Encontré que este enfoque es el comportamiento UX esperado.

Use ng-focus

Opción 1: código separado

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

y en controlador

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

Opción 2: como alternativa, puede unir el código anterior en este "one-liner" (no probé esto pero debería funcionar)

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

En angular 2, esto funcionó para mí, tanto en Chrome como en Firefox:

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

La respuesta aceptada es usar el evento de clic; sin embargo, si usa el evento de enfoque, solo el primer clic activará el evento y también se disparará cuando se use algún otro método para enfocarse en la entrada (como presionar la pestaña o llamar al foco en el código).

Esto también hace innecesario verificar si el elemento ya está enfocado como sugiere la respuesta de Tamlyn.

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

No se necesitan directivas, solo agregue onfocus="this.select()"JavaScript nativo al elemento de entrada o área de texto.

Versión modificada que funcionó para mí. El primer clic selecciona el texto, el segundo clic en el mismo elemento deselecciona el texto

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

})