Menu
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?
945
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
