CODEWITHSUNDEEP
javascriptangularjs
devmao
devmao

Reputation: 680

How to handle conditional focus and selection on a text input in AngularJS?

In this sample code http://plnkr.co/l6kv7x I want to move the focus into text input and select the content when the user clicks the edit button but I didn't figure it out how to do it in AngularJS.

Upvotes: 1

Views: 3939

Answers (2)

Jigar Patel
Jigar Patel

Reputation: 4615

There is no direct way of doing it using AngularJS. You have to use JavaScript or JavaScript library such as jQuery for DOM manipulation, however it is not recommended to perform any DOM manipulation inside controller. What you want to do is use directive.

Upvotes: 1

Mark Rajcok
Mark Rajcok

Reputation: 364727

The question is very similar to AngularJS - Focusing an input element when a checkbox is clicked, so here is a very similar solution: a focus directive, that takes editing as an attribute:

app.directive('focus', function() {
    return function(scope, element, attrs) {
        scope.$watch(attrs.focus, function(newValue) {
            newValue && element[0].focus()
        })
    }
});

As @Josh already pointed out, we can use the native DOM focus() method, by accessing the raw DOM element using element[0] -- element itself is a wrapped jqLite (or jQuery if loaded) element.

The HTML:

<input ng-show="editing" type="text" ng-model="text" value="{{text}}"
  focus="editing">

Fiddle.

Upvotes: 3

Related Questions