In my Angular view I have an input field and some clickable goodies using ng-click.

Is there an angular way or simple vanilla js way to prevent the input field from LOSING focus (if it was in focus) when one of these ng-clicks is clicked?

<input type="text" class="form-control" ng-model="foo">

<button ng-click="someThing()">click me</button>

In my Angular view I have an input field and some clickable goodies using ng-click.

Is there an angular way or simple vanilla js way to prevent the input field from LOSING focus (if it was in focus) when one of these ng-clicks is clicked?

<input type="text" class="form-control" ng-model="foo">

<button ng-click="someThing()">click me</button>

• javascript
• angularjs

Share Follow edited Jun 10, 2016 at 22:29 spazm 4,80911 gold badge3535 silver badges3434 bronze badges asked Jan 28, 2016 at 20:58 Sean256Sean256 3,10944 gold badges3333 silver badges4242 bronze badges 2

• call ` $(pattern).focus() ` in the method used in your ng-click ;) for example in ` someThing() ` – anotherdev Commented Jan 28, 2016 at 21:02
• Why do you want that it should not loose focus? – P. Jairaj Commented Jan 28, 2016 at 21:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

Not with ng-click, because by the time that fires, the clicked element has already taken the focus from the input.

But ng-mousedown should work, if you $event.preventDefault() in your event handler. Here's a demonstration in vanilla JS; the same should work in Angular:

    var preventBlur = function(event) {
      console.log("click");
      event.preventDefault();
    }

    <input type='text' onblur="alert('blurred')">
    <button onmousedown="preventBlur(event)">Click</button>
    

If you click the button while the input field is in focus, the mousedown will trigger without causing the input field to lose focus.

The easiest solution is to use javascript

$scope.someThing = function () {
    //implementation...
    document.getElementById("yourInputIt").focus();
};