How to select the content of an input in ng-Focus?

Asked

Viewed 1,243 times

2

In an input I have a method that selects the content of the field when clicking on it.

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

That’s the job of: 

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

It works perfectly, but I want to use it in ng-Focus, and in that event it doesn’t work:

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

Can anyone tell me why? What alternatives do I have?

An example of how I’d like you to stay: inserir a descrição da imagem aqui

javascript html angularjs

3 answers

0

I used in ng-click and ng-Focus and it worked, in both cases called the function, but to get the value of the field used

$Event.target.value

Just one question: Why do I pick up the Focus? when the input is empty will always come empty, to pick up after the user has finished filling has to be ng-Blur. But I don’t know what you’re doing, if that’s when you give the input Focus, just exchange the . select() for . value and it’s all right.

  • Call the function it normally calls. in both cases. But the . select() function does not work in ng-Focus, only in ng-click. what I want is when I enter the field(receive Focus), the content of the field is all selected, to facilitate editing. so I don’t need to click on the field to select the value, I can use tab, enter for example. o . value didn’t work for me.

  • i tested it here in an app of mine. From a console.log($Event.target) within its function, see what’s coming.

  • $Event.target returns the element in both events, I have now tested, the strange thing is that . select() works on ng-click and does not work on ng-Focus, nor . value.

  • I tested it here on Chrome and it worked with . value, weird. If you change the way to call the function also gives, put an ng-model="fieldName" and send in the call of the function ng-Focus="selectTudo(fieldName)", if it doesn’t work out shows how your form is to see if there is something missing, here in my test the . Right value on any input on android and Chrome.

  • I think I expressed myself wrong, the "select everything", is not recovering the value of the field in js, but I want you to select all the content of the field in the view. I added in the post the result of how I would like it to stay.

  • now I get it. I was really trying to pass you the value. I’ll see here if I can get what you’re looking for.

Show 1 more comment

0

The correct is to use the event mouseenter.

This event is triggered when the mouse cursor is placed on an element, if the user moves the mouse over that element, the event is not triggered again.

See working

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>

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.