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
– Pankaj Parkar, Commented Apr 3, 2016 at 9:53
do use angular.element(document.getElementById("txtData")).focus(); should work ideally without using jQuery.. — Pankaj Parkar
– Pankaj Parkar, Commented Apr 3, 2016 at 9:58

Mou · Accepted Answer · 2016-04-07 14:23:18Z

3

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();
           })
        }
      }
})

answered Apr 7, 2016 at 14:23

Mou

16.4k46 gold badges165 silver badges284 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maen · Accepted Answer · 2016-04-03 09:58:39Z

2

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>

edited Apr 3, 2016 at 9:58

answered Apr 3, 2016 at 9:55

Maen

10.7k3 gold badges47 silver badges71 bronze badges

2 Comments

Mou Over a year ago

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 Over a year ago

can u post a easy example code to place focus on textbox when button click by writing custom directives ?

Collectives™ on Stack Overflow

AngularJS How to place focus on textbox when button click

my full code

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

my full code

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related