I am showing an alert() message in the onkeyup event of an input element when the user presses the enter key. If the user presses Ok button or presses Enter key to close the alert box, everything is fine. But when the user presses the Escape button to close the alert, the textbox freezes. It wouldn't be focused on, won't be typed on, as if it is disabled.
How do I fix that?
Note: the problem won't appear in jsfiddle
EDIT:
I believe the behavior is different if the code is hosted in sites like jsfiddle, even in the Run Code Snippet here in SO. Please try to replicate the problem by actually saving the code in an html file. then run it locally
UPDATE:
I'm using Windows 10. I found out problem only happens on Google Chrome/Microsoft Edge. It doesn't happen on Firefox.
I was able to replicate the problem in virtual machine in cloud. Google Chrome on Windows Server 2022. I even used its On Screen Keyboard to make sure it is not a hardware problem.
window.addEventListener('DOMContentLoaded', () => {
document.getElementsByTagName("input")[0].onkeyup = function(event) {
if (event.keyCode === 13) {
alert('Press Escape Key. The textbox will freeze.');
};
}
});<input placeholder="Press Enter Here" />I tried saving the code in an html file and running it locally. But the code works fine. The input box works fine for me and didn't get freeze by pressing Escape button. Even when I tried running the script in this stackoverflow site, it worked here too.
window.addEventListener('DOMContentLoaded', () => {
document.getElementsByTagName("input")[0].onkeyup = function(event) {
if (event.keyCode === 13) {
alert('Press Escape Key. The textbox will freeze.');
};
}
});<input placeholder="Press Enter Here" />