Safari: Focus Event Doesn't Work on Button Element

Safari: focus event doesn't work on button element

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

$(".btn").mouseup(function(e){
    e.preventDefault();
});

Why blur and focus doesn't work on Safari?

It seems Safari doesn't focus button element on click. So, according to definition, onblur attribute fires the moment that the element loses focus. Element is not focused => onblur doesn't fire.

One of the solution could be manually apply button.focus() after click.

Another one is to attach click event on document as here

Focus event for button doesn't fire on iPad

The solution was quite simple. You simply can't use a button on an iOS device, because it doesn't have a focus event. Instead, you should use an a tag with role="button" and a valid tabindex setting.

<a role="button" id="ap-btn-selectBorderColor" class="btn btn-outline-secondary" data-toggle="popover" tabindex="1">
    <i class="fa" style="background-color: rgb(0, 51, 142); width: 16px" id="ap-bdColorSelection"> </i>
</a>

Why Safari doesn't set `<button>` as `document.activeElement` after clicking it?

While <button> is a focusable element, it doesn't get focus after clicking on it in Safari/Firefox on macOS:

This seems to be intentional behavior and won't be changed. Read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus

Safari doesn't correctly change active element on focus

As far as manually putting focus is concerned i think it's an ES 6 support issue , try traditional syntax instead

document.querySelector('a').addEventListener('click', function(e) {

  //e.preventDefault();
  this.focus();
  document.querySelector('.active-el-tag').innerHTML = document.activeElement.tagName.toLowerCase();

});

focus() not working in safari or chrome

I got the answer on my own, it might seem weak, and too simple, but it works.

Ready for this awesomeness..?

Just add a timer of 0 to the focus...for some reason it just gives it enough time to fully load the input into the DOM.

function recipientDivHandler(code, element) {
  $("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />');
  setTimeout(function() {
    $("#toInput").focus();
  }, 0);
}

If someone else can further explain this or has a better answer please feel free to take the stage :-)

Mobile Safari input focus leaves artifacts of elements in previous position

This is a known bug in iOS and they say they're going to fix it in the 11.3 release.

https://www.apple.com/newsroom/2018/01/apple-previews-ios-11-3/

---

Related Topics