Angularjs: How to pre-select input text field on page load?

Question

I have a simple text input field in my angular app which is prefilled with a default value. I want to preselect the text on page load.

Input field:

<input type="text" ng-model="city" class="form-control" select-on-load />

Directive:

weatherApp.directive('selectOnLoad', function () {
// Linker function
return function (scope, element, attrs) {
    element.bind('load', function () {
        this.select();
    });
};

});

But nothing happens.

Did you try replace `this.select()` by `element.select()` or `$(this).select()` ? — Ngob, Jan 28 '15 at 11:29
I tried element.select() as well. And I don't want to use jQuery to be honest but it wont work either. — KiwiJuicer, Jan 28 '15 at 11:31
Not sure if I understand you but you can just use autofocus to pre-select that field — user3811714, Jan 28 '15 at 12:00
Doesn't work for me, have a look: http://plnkr.co/edit/6MV1SQbrTfXLRrQ0kjEQ?p=preview — KiwiJuicer, Jan 28 '15 at 12:14

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

The answers to this question suggest that there is no load event for input elements. However, maybe you could attach the handle once the view content has loaded?

$scope.$on('$viewContentLoaded', function(){
    // Set a flag
  });

It isn't as neat as a directive, but it's the simplest alternative to my knowledge. The event sets a flag, the element uses an ng-focus depending on that flag, and your original directive can be updated to listen for focus, not load.

EDIT: I've done some searching, and can't find any ideas of a better alternative. It does feel a lot like a hack, so I welcome anyone with a better suggestion.

edited May 23 '17 at 10:28

Community

1
1

answered Jan 28 '15 at 11:30

Tom

522
3
13

I don't even know how to access the DOM elements via the controller but that's exactly what AngularJS tries to avoid. I thought any interaction with the DOM should be done via directives. – KiwiJuicer Jan 28 '15 at 11:40
It feels a bit dirty, but consider using `ng-focus`. Have a controller variable, `viewIsLoaded` that is updated by the above handler. Then, on your view, use `ng-focus="viewIsLoaded"` to focus the box. There might be a way to avoid this - have `ng-focus` directly listen to `$viewContentLoaded` - but I don't know of it yet. I'll do some reading. – Tom Jan 28 '15 at 11:42
Modified my comment - what I meant was `ng-focus`. Then, your original handler listens for focus, not load, which is an available handler for input. – Tom Jan 28 '15 at 11:45
Sorry Tom, but I'm not entirely sure what your solution is. With ng-focus you can trigger a function in the controller when the input field gets focus, but I want to focus and select the input text simply when the page loads. – KiwiJuicer Jan 28 '15 at 13:31
Your issue was that you can't set a load event for input. However, by setting a focus event, you can achieve the same if the input gets focus when the page is loaded. It was a pretty roundabout solution, but I think it solves the problem :) – Tom Jan 28 '15 at 14:23

score -1 · Answer 2 · answered Jan 28 '15 at 11:52

-1

Try this.

function selectOnLoadDirective() {
  return {
    link: function(scope, elem) {
      elem.focus().select();
    }
  };
}

answered Jan 28 '15 at 11:52

Miraage

3,334
3
26
43

With function selectOnLoadDirective() { } you mean the directive I created right? If not where would you put that function? – KiwiJuicer Jan 28 '15 at 12:00
Sure. Just copy `elem.focus().sleect();` into your link function. That's all. – Miraage Jan 29 '15 at 08:42

score -1 · Answer 3 · answered Mar 15 '19 at 15:53

-1

Super late but you can easily accomplish this using JS. Inside your controller...

Example...

Then inside your html id you have an input tag with a matching id

Easy peasy

Hope that helped!

answered Mar 15 '19 at 15:53

caroham29

19
3

3

Please [do not post code as images](https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-on-so-when-asking-a-question). – dedObed Mar 15 '19 at 16:13

Angularjs: How to pre-select input text field on page load?

3 Answers3