Selecionar texto no foco de entrada

Eu tenho uma entrada de texto. Quando a entrada recebe o foco, quero selecionar o texto dentro da entrada.

Com o jQuery, eu faria da seguinte maneira:

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

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

Eu procurei ao redor para tentar encontrar a maneira Angular, mas a maioria dos exemplos que estou encontrando está lidando com uma diretiva que está observando uma propriedade modal para uma mudança. Estou assumindo que preciso de uma diretiva que esteja procurando por uma entrada que receba foco. Como eu faria isso?

A maneira de fazer isso no Angular é criar uma diretiva personalizada que faça a seleção automática para você.

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

Aplique a diretiva assim:

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

View demo

Update1 : Removida dependência de jQuery.

Atualização2 : Restringir como atributo.

Update3 : funciona no Safari móvel. Permite selecionar parte do texto (requer IE> 8).

Aqui está uma diretiva aprimorada que evita selecionar novamente o texto quando o usuário clica para posicionar o cursor na caixa 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 é uma resposta antiga, para o Angular 1.x

A melhor maneira de fazer isso é usando a ng-clickdiretiva interna:

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

EDITAR:

Como JoshMB lembrou gentilmente; a referência a nós DOM no Angular 1.2+ não é mais permitida. Então, eu mudei $event.target.select()para o controlador:

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

Então no seu controlador:

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

Aqui está um exemplo de violino .

Nenhuma das soluções propostas funcionou bem para mim. Após uma pesquisa rápida, vim com isso:

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

  }

});

É uma mistura de várias soluções propostas, mas funciona tanto no clique quanto no foco (pense no foco automático) e permite a seleção manual de valor parcial na entrada.

Para mim, ng-click não fazia sentido, porque você nunca poderia reposicionar o cursor sem selecionar todo o texto novamente, achei isso irritante. Então é melhor usar o ng-focus, porque o texto é selecionado apenas se a entrada não tiver sido focada. Se você clicar novamente para reposicionar o cursor, o texto será desmarcado, conforme o esperado, e você poderá escrever no meio.

Eu achei que essa abordagem era o comportamento UX esperado.

Use ng-focus

Opção 1: código separado

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

e no controlador

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

Opção 2: como alternativa, você pode associar o código acima a esse "one-liner" (não testei isso, mas deve funcionar)

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

No angular 2, isso funcionou para mim, tanto no Chrome quanto no Firefox:

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

A resposta aceita está usando o evento click, no entanto, se você usar o evento focus, apenas o 1º clique acionará o evento e também será acionado quando algum outro método for usado para focar na entrada (como pressionar a guia ou chamar o foco no código).

Isso também torna desnecessário verificar se o elemento já está focado, como sugere a resposta de Tamlyn.

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

Nenhuma diretiva é necessária, basta adicionar onfocus="this.select()"javascript nativo ao elemento de entrada ou à área de texto.

Versão modificada que funcionou para mim. Primeiro clique seleciona texto, segundo clique no mesmo elemento desmarca 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
        });
    }
}

})