Force cursor to input box immediately after webpage is loaded

Question

I would like to force the cursor to go to an input field immediately after the webpage is loaded. I am using AngularJS and the HTML code for the input field is as follows;

  <form novalidate="" class="simple-form">Identity number 
  <input type="text" ng-model="input_number" />
  <br />
  <button ng-click="submit()">SUBMIT</button></form>

How can this be done the AngularJS way? If not, using normal javascript or jquery are also welcomed.

You might find this useful: http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model — Cybrix, Apr 23 '14 at 02:49

score 2 · Answer 1 · answered Apr 23 '14 at 02:46

To complete @Felix answer, jQuery function should be wrapped inside a directive

yourapp.directive('autoFocus', function() {
  return {
    restrict: 'A',
    link: function($scope, $element, attrs) {
      $element.focus();
    }
  };
});

And you can use the directive like this <input type="text" auto-focus>

Also some good reading: https://docs.angularjs.org/guide/directive and http://www.sitepoint.com/practical-guide-angularjs-directives/

score 2 · Accepted Answer · answered Apr 23 '14 at 03:05

2

You can also use simply autofocus html5 attribute.But it is not supported in Internet Explorer 9 and earlier versions.

answered Apr 23 '14 at 03:05

Arkar Aung

3,554
1
16
25

Thanks. This is the simplest solution of all. – guagay_wk Apr 23 '14 at 09:31

score 0 · Answer 3 · answered Apr 23 '14 at 02:39

0

You can use .focus() with jQuery:

$('form input[type=text]:eq(0)').focus();

answered Apr 23 '14 at 02:39

Felix

37,892
8
43
55

Force cursor to input box immediately after webpage is loaded

3 Answers3