13

The focus event works fine on all browsers but Safari when it has been clicked.

And it works fine on div[tabindex] element, but don't work on button or input:button element.

It also can get the focus event when I use $('.btn').focus().

Why does the focus event haven't triggered on click ?

Here is my code:

$(".btn").focus(function (e) {
 $(".result").append("<p>Event:"+e.type+", target:"+e.target+"</p>");
})
.result{min-height:200px;border:1px solid #000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn">button 1</button>
<input type="button" class="btn" value="button 2"/>
<div class="btn" tabindex="0">div element</div>
<h1>
Result:
</h1>
<div class="result">

</div>
Woody
  • 133
  • 1
  • 1
  • 7

6 Answers6

18

Documentation tells is not supported: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

enter image description here

trh
  • 7,186
  • 2
  • 29
  • 41
Chris Tapay
  • 1,004
  • 10
  • 21
  • Old but gold. Thanks. For my particular case, I just changed my button element to div *and* set its [tabindex attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) accordingly (tabindex="1" for me). – Manuel Jun 29 '22 at 10:37
8

Why does the focus event haven't triggered on click ?

We found through research that Safari and FireFox on Macs do not set focus on buttons when you click on them.

The way we fixed that was to add a click listener to our buttons and call focus() on the button that was clicked.

In Angular it looked like this:

<button (click)="myClickFunction(); $event.target.focus();>My Button</button>
Brian Bjork
  • 181
  • 1
  • 6
4

See https://bugs.webkit.org/show_bug.cgi?id=13724

This is working as intended on MacOS. Clicking a button, radio button, or checkbox doesn't give the element focus- thus it can't lose focus and trigger a blur.

The solution is to give it a click event that gives the element focus.

Michael Perkins
  • 41
  • 1
  • Giving element click event via addEventListener doesn't give it the ability to receive focus on click. You have to call focus method on the element when it is clicked `button.addEventListener('click', e => e.currentTarget.focus())` – Caleb Taylor Jan 10 '23 at 22:24
3

Use the code below to fix all the buttons on a web page:

(function() {
  var buttons = document.querySelectorAll("button");
  for (var i=0; i<=buttons.length-1; i++) {
    (function(index) {
      var button = buttons[index];
      button.addEventListener("click", function() { button.focus(); });
    })(i);
  }
})();
Rehmat
  • 2,121
  • 2
  • 24
  • 28
  • This is a beautiful solution. The only caveat is that it will need some tweaking if you're planning to use it in an ajax environment, to avoid saddling buttons with event listeners. – dearsina Dec 18 '22 at 19:33
1

Angular 8+ solution:

  1. in your button tag add #toggleButton and (click)="onClick(); $event.stopPropagation()"

exp:

<button #toggleButton type="button"
    (click)="onClick(); $event.stopPropagation()"></button>
  1. in your component.ts add ==>before constructor

*** @ViewChild('toggleButton', { static: true }) toggleButton: ElementRef;

onclick(){
        this.toggleButton.nativeElement.focus();
}
JEMMALI MED ÉMIR
  • 21
  • 2
0

This might fix the issue: https://stackoverflow.com/a/1269767/2731261

$(".btn").mouseup(function(e){
    e.preventDefault();
});
Community
  • 1
  • 1
ken
  • 121
  • 6
  • I think that sames like not the same issue. It only reproduce on Safari. What I want is get the focus event on the button when clicked. – Woody Mar 14 '17 at 03:12
  • 2
    Well I just found this documentation basically saying Safari does not focus the button after click: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus – ken Mar 14 '17 at 03:58