3

Em um input eu tenho um método que seleciona o conteúdo do campo ao clicar nele.

<input ng-click="selecionaTudo($event)">

A função é essa:

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

Funciona perfeitamente, Mas eu quero usar ele no ng-focus, e nesse evento não funciona:

<input ng-focus="selecionaTudo($event)">

Alguém sabe me dizer o porque? Quais alternativas eu tenho?

Exemplo de como gostaria que ficasse: inserir a descrição da imagem aqui

3 Respostas 3

0

Eu utilizei no ng-click e no ng-focus e deu certo, nos 2 casos chamou a função, mas para pegar o valor do campo utilizei

$event.target.value

Só uma dúvida: pq pegar no focus? quando o input está vazio sempre virá vazio, para pegar depois que o usuário acabar de preencher tem que ser ng-blur. Mas não sei o que está fazendo, se for quando der focus no input é só trocar o .select() por .value e tá tudo certo.

6
  • Chamar a função ele chama normalmente. em ambos os casos. Mas a função .select() não funciona no ng-focus, somente no ng-click. o que eu quero é quando eu entrar no campo(receber focus), o conteúdo do campo fique todo selecionado, para facilitar a edição. assim não preciso clicar no campo para selecionar o valor, posso usar tab, enter por exemplo. o .value não funcionou pra mim.
    – Geferson
    23/03/2016 às 13:16
  • eu testei aqui em um app meu. Da um console.log($event.target) dentro da sua função, vê o que está vindo. 23/03/2016 às 13:23
  • $event.target retorna o elemento nos dois eventos, testei agora, o estranho é que o .select() funciona no ng-click e não funciona no ng-focus, nem o .value.
    – Geferson
    23/03/2016 às 13:26
  • Testei aqui no chrome e funcionou com .value, estranho. Se você mudar a forma de chamar a função também dá, coloque um ng-model="nomeDoCampo" e mande na chamada da função ng-focus="selecionaTudo(nomeDoCampo)", se não der certo mostra como está o seu form para vermos se tem algo faltando, aqui no meu teste o .value da certo em qualquer input no android e no chrome. 23/03/2016 às 13:44
  • Acho que me expressei errado, o "selecionar tudo", não é recuperar o valor do campo no js, mas sim quero que selecione todo o conteudo do campo na view. adicionei no post o resultado de como gostaria que ficasse.
    – Geferson
    23/03/2016 às 13:58
0

O correto é utilizar o evento mouseenter.

Esse evento é disparado quando o cursor do mouse é posto sobre um elemento, caso o usuário mova o mouse sobre esse elemento, o evento não é disparado novamente.

Veja funcionando

var app = angular.module('appSelecionaTexto',[]);
app.controller('SelecionaTextoController', function($scope){
  $scope.selecionaTudo= function($event){
    $event.target.select();
  }
});
input {
  width: 250px;
}
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<div ng-app="appSelecionaTexto">
  <div ng-controller="SelecionaTextoController">
    <input value="Texto a ser selecionado :) :D :P" ng-mouseenter="selecionaTudo($event)">
  </div>
</div>

-2
app.directive('selectOnFocus', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('focus', function () {
                if (!$window.getSelection().toString()) {
                    // Required for mobile Safari
                    this.setSelectionRange(0, this.value.length)
                }
            });
        }
    };
});

<input select-on-focus>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .