Angular Js Textbox not focus on button click

Question

Unable to focus on textbox on button click:

<html ng-app="CommonApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
    <input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
    <div class="login_btn_outer">
        <div class="login_btn_outer2" ng-click="cLgn();">
            <a class="btn">Login</a>
        </div>
    </div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
    myApp.controller('HeadCtrl', function($scope){
        $scope.cLgn= function(){
            if($scope.username.trim().length==0)
            {
                //Here How to focus my textbox
            }
        };
    });

Nitin Kumar · Accepted Answer · 2016-10-04 06:03:23Z

1

<html ng-app="CommonApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
    <input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
    <div class="login_btn_outer">
        <div class="login_btn_outer2" ng-click="cLgn();">
            <a class="btn">Login</a>
        </div>
    </div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
    myApp.controller('HeadCtrl', function($scope){
        $scope.cLgn= function(){
            if($scope.username.trim().length==0)
            {
                document.getElementById("UserName").focus();
            }
        };
    });

answered Oct 4, 2016 at 6:03

Nitin Kumar

9087 silver badges22 bronze badges

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

Comments

Ruhul · Accepted Answer · 2016-09-01 11:11:28Z

0

You can use angular.element to select your input box and can call focus(). Try something similar to below::

 <html ng-app="CommonApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
    <input id="UserName" type="text" class="login_boxdecor" ng-model="username"/>
    <div class="login_btn_outer">
        <div class="login_btn_outer2" ng-click="cLgn();">
            <a class="btn">Login</a>
        </div>
    </div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
    myApp.controller('HeadCtrl', function($scope){
        $scope.focusText =false;
        $scope.cLgn= function(){
            if($scope.username.trim().length==0)
            {
                 angular.element("#UserName").focus();
            }
        };
    });

edited Sep 1, 2016 at 11:11

answered Sep 1, 2016 at 10:53

Ruhul

1,0308 silver badges15 bronze badges

4 Comments

Ruhul Over a year ago

cLgn() is getting called?? Can you verify. See running code @ jsfiddle.net/deathhell/UTn5y/2

Nitin Kumar Over a year ago

I want to focus my textbox on button click and the link you provided here is focus a textbox when mouse pointer focus a textbox.

Ruhul Over a year ago

Ohk, got it: I have just updated the answer, can u plz have a try ? put angular.element("#UserName").focus(); in your function call.

Nitin Kumar Over a year ago

its not working but i have got the another solution by doing this document.getElementById("UserName").focus();

Collectives™ on Stack Overflow

Angular Js Textbox not focus on button click

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related