angularjs - keep focus on input when clicked on a button

Question

I'm trying to keep the focus on the textarea when click on one div a button .

<input type="text" ng-model="myText" id = "area1" ></input>

And my buttons are dynamically generated by template in a directive as,

 <my-buttons > </my-buttons>

app.directive('myButtons', function () {
    return {
        restrict: "E",
        templateUrl: "templates/buttons.html"
        link: function ($scope) {}
    };
});

Template is

<div>
    <div>
        <div ng-click="submitResult();">
            <div ng-style="color:red"> <span>OK</span>
            </div>
        </div>
    </div>
</div>

when I click on submit it removes the focus from the input but I want that the focus to remain on the input where it was. I know that we can set the focus by

document.getElementById("id").focus();

Do I have to add a attribute to the myButtons directive and pass the id of the input or there is any other workaround in angularjs . There can be many number of such input and buttons on the page.

Charlie · Accepted Answer · 2015-11-17 11:10:44Z

3

There is no angular method to tell an element not to loose focus even when another control needs focus. You need to implement this functionality yourself by manually handling blur event.

edited Nov 17, 2015 at 11:10

answered Nov 17, 2015 at 10:38

Charlie

24k12 gold badges65 silver badges97 bronze badges

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

1 Comment

VishwaKumar Over a year ago

Actually if you look at his template , he is using div element as button

Asaf Yonay · Accepted Answer · 2015-11-17 11:17:45Z

1

Following Charlie's answer, and as a suggestion to get what you want done, try keeping track of who's currently focused. On button click, return the focus to the element that was last focused.

answered Nov 17, 2015 at 11:17

Asaf Yonay

694 bronze badges

Collectives™ on Stack Overflow

angularjs - keep focus on input when clicked on a button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related