AngularJS How to place focus on textbox when button click

Question

i have one textbox and few buttons and i want when user will click on any button then textbox will have focus. i tried this way but did not work angular.element("#txtData").focus();

my full code

<div ng-app="myApp" ng-controller="myCtrl">
<table border=2>
<tr>
<td colspan=5><input type=text ng-model="Operantion" id="txtData" style="width:97%" ng-change="GetData(Operantion,'onChange')"></td>
</tr>
<tr>
<td><input type=button value="+" ng-click="GetData('+','btnClick')"></td>
<td><input type=button value="-" ng-click="GetData('-','btnClick')"></td>
<td><input type=button value="x" ng-click="GetData('*','btnClick')"></td>
<td><input type=button value="/" ng-click="GetData('/','btnClick')"></td>
<td><input type=button value="=" ng-click="GetData('=','btnClick')"></td>
</tr>
</table>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.GetData = function (arg1, evtType) {
        if (evtType === 'btnClick') {
            angular.element("#txtData").focus();
        }
    };
});

js fiddle https://jsfiddle.net/tridip/wzvq5ov8/

i found few same kind of post in this forum and saw people write many code to achieve this by custom directives. i am so new and that is why i do not understand their code. one similar post url here which i checked https://stackoverflow.com/a/15529412/728750

this code angular.element("#txtData").focus(); suppose to work in angular but did not.......do i need to refer any library called jqLite ?

i heard jqLite is inbuilt in angular js...is it true. can anyone tell me why the this code did not function angular.element("#txtData").focus(); from controller function ?

Your code would work..if you include jQuery before angular, in your current case do query has been using `jQLite` API, which doesn't support `selector` based query.. — Pankaj Parkar, Apr 03 '16 at 09:53
do use `angular.element(document.getElementById("txtData")).focus();` should work ideally without using jQuery.. — Pankaj Parkar, Apr 03 '16 at 09:58

score 3 · Accepted Answer · answered Apr 07 '16 at 14:23

i find out how to place focus with angular directives. here is code

jsfiddle https://jsfiddle.net/tridip/muz887hu/1/

<div class="main" ng-app="myApp">
<p>Name: <input type="text" ng-model="name" id="question1"></p>
<button id='btn' set-focus='question1'>click</button>
</div>

var myApp = angular.module('myApp',[]);
myApp.directive('setFocus',function(){
     return {
        link:  function(scope, element, attrs){
          element.bind('click',function(){
                 //alert(element.attr('id'));
               document.querySelector('#' + attrs.setFocus).focus();
           })
        }
      }
})

Maen · Answer 2 · 2016-04-03T09:58:39.883

First of all, you have an eloquent error in your JS console that can lead you on the right way :

VM363 angular.js:12520 Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element http://errors.angularjs.org/1.4.8/jqLite/nosel

So, don't use jqLite or jQuery, and use .focus() on the element itself, as simple as possible :

document.querySelector("#txtData").focus();

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.GetData = function(arg1, evtType) {
        if (evtType === 'btnClick') {
          document.querySelector("#txtData").focus();
        }
      };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table border=2>
    <tr>
      <td colspan=5>
        <input type=text ng-model="Operantion" id="txtData" style="width:97%" ng-change="GetData(Operantion,'onChange')">
      </td>
    </tr>
    <tr>
      <td>
        <input type=button value="+" ng-click="GetData('+','btnClick')">
      </td>
      <td>
        <input type=button value="-" ng-click="GetData('-','btnClick')">
      </td>
      <td>
        <input type=button value="x" ng-click="GetData('*','btnClick')">
      </td>
      <td>
        <input type=button value="/" ng-click="GetData('/','btnClick')">
      </td>
      <td>
        <input type=button value="=" ng-click="GetData('=','btnClick')">
      </td>
    </tr>
  </table>
</div>

i want to run this code angular.element("#txtData").focus(); without jquery including because jqLite is inbuilt in angular then why we need to add jquery reference ? — Mou, Apr 03 '16 at 09:57
can u post a easy example code to place focus on textbox when button click by writing custom directives ? — Mou, Apr 03 '16 at 10:45

AngularJS How to place focus on textbox when button click

my full code

2 Answers2