Essentially is it possible to stop an element, in my case a button element from getting focus in javascript?

What I am trying to achieve is an AngularJS directive that when it gets focus will show a number of buttons/UI elements. Using the ng-focus and ng-blur directives this is easily achieved however when I try to click any of the buttons, the button gains focus so the div no longer has focus, ng-blur is triggered and the buttons are hidden.

I want the buttons to stay visible whilst the directive element has focus and be clickable.

Here is a Plunker showing this behavior.

Thanks in advance.

Essentially is it possible to stop an element, in my case a button element from getting focus in javascript?

What I am trying to achieve is an AngularJS directive that when it gets focus will show a number of buttons/UI elements. Using the ng-focus and ng-blur directives this is easily achieved however when I try to click any of the buttons, the button gains focus so the div no longer has focus, ng-blur is triggered and the buttons are hidden.

I want the buttons to stay visible whilst the directive element has focus and be clickable.

Here is a Plunker showing this behavior.

Thanks in advance.

• javascript
• angularjs

2 Answers 2

I think it would have been simpler not to use any focusable element such as <button>s and <a> anchor tags. You can use a div that is not focusable and style it as a button, bind your ng event at that div and it should solve your problems. You gain the non-focusable advantage and still get to append your events in that particular element.

focusableDiv directive

change

<button class="btn" ng-click="add()" ng-show="isFocused">Action</button>

to

<div class="btn btn-primary" ng-click="add()" ng-show="isFocused">Action</div>

Note: the changes above assumes that you are using bootstrap-css to style your <div> button

See this plunker update

You know....you don't have to actually click the button.

'<button class="btn" ng-focus="add()" ng-show="isFocused">Action</button>' +

Fork of your plunkr: http://plnkr.co/edit/7uoOF5HS0yrsW5kquodA?p=preview