4

I have simple button like that:

<button class="emoji-button-container" onblur="APP.hideEmojiContainer()" onclick="APP.toggleEmojiContainer()">

On Chrome both event works perfectly.

On Safari onclick event works without any problem, but onblur event doesn't get triggered. Also element.blur() function doesn't trigger onblur event. I need it to work on Safari just like on Chrome, so what can I do? what's problem here?

3 Answers 3

8

On Safari, buttons may not be focused on click (and because they do not focus, they do not trigger blur)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

You can focus the button using javascript though

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript">
            function clickFunc(event) {
                console.log(event, 'click');
                event.target.focus();// Add me
            };

            function blurFunc(event) {
                console.log(event, 'blur');
            };
        </script>
    </head>

    <body>
        <button class="emoji-button-container" onblur="blurFunc(event)" onclick="clickFunc(event)"></button>
    </body>
</html>
7

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

0

Try the Safari settings that are not enabled by default: • Go to Safari > Preferences.

  • Click on the Advanced tab.
  • Check the box at the bottom that says "Press Tab to highlight each item on a webpage."
2
  • How to make this click from the website itself? My clients are not experts in changing the settings.
    – Common Tt
    2 days ago
  • Couldn't find a way for Safari, tab navigation is not enabled by default there. yesterday

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.