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

Share Improve this question Follow asked May 5, 2014 at 0:51 adamKadamK 3,88955 gold badges3838 silver badges4949 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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