Why Blur And Focus Doesn't Work On Safari?
I have simple button like that:
Solution 1:
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>
Solution 2:
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
Post a Comment for "Why Blur And Focus Doesn't Work On Safari?"