Cannot input text after closing a confirm dialog by Esc key - javascript

After closing a confirm dialog on a page by Esc key, I cannot input any text into any text field on the page. How can I fix it?
This small html should be able to reproduce the problem easily.
<html>
<head></head>
<body>
<input type="text">
<script>
window.confirm('hogehoge')
</script>
</body>
</html>
Repro Steps:
Open this html to open a confirm dialog above the page.
Hit Esc key on keyboard to close the dialog.
Click on the text-input field on the page to try input something.
Result:
Caret doesn't show up, and cannot input anything.
Expected:
Can input text into the text-input field.
Notes:
This repros on Chrome and Edge(chromium).
Not repro on FireFox.
OS: Windows10
Once the focus goes out of the window, this problem disappears.

It seems like it's a security feature, not a bug:
https://www.zdnet.com/article/google-changes-how-the-escape-key-is-handled-in-chrome-to-fight-popup-ads/
From the article
"Since users never intend to interact with the page through the ESC
key, it should not trigger user activation," Google said.
By "user activation" they exclude things like mouse hover or swiping fingers on the screen.

Related

Page refresh on JS alert - can't focus on text input

I've noticed on Chrome and Edge that if I have a javascript confirm (or alert or prompt) message fire, and the user refreshes the page instead of clicking the ok/cancel button, any textfield on the page cannot be edited.
<html>
<body>
<input name="input" value="Can you type here?" />
<script>
console.log("document has focus = "+document.hasFocus())
if(document.hasFocus()==true){
confirm("Refresh this page, do not click cancel or ok");
}
</script>
</body>
</html>
It's as if refreshing on the popup completely blurs Chrome, so the only way to get it back into focus is to click out from the app and back in again. Even constant refreshing by ctrl-R won't put the focus back.
By forcing focus onto the textfield onload, the textfield will have focus but I still can't type into the box, as the browser itself is out of focus.
Has anyone seen this before? A colleague and I couldn't find any mention of this online, apologies if it's been answered.
I'm on Windows 7
Chrome 91.0.4472.77
Edge 90.0.818.46
On my Mac (Chrome 90.0.4430.212) I cannot replicate this.
Cheers
Just posting for the record that I raised this as a bug and it's been merged into an existing bug that I didn't find when searching. As yet no fix on the Chromium side but hopefully will see a fix in future.
https://bugs.chromium.org/p/chromium/issues/detail?id=1085949

Stopping a keyboard from popping up from button presses

I have built a small tool that pushes text into a <textarea> with button inputs, you can see it here
However, on mobile, when a user interacts with those buttons, the keyboard pops up obscuring half the screen. Is there anyway to stop this?
Try adding a readonly attribute to the textarea.

IPhone - Not able to enter text in textarea

We have a form which has a mandatory HTML text-area and a button which posts the form.
When user click the button with empty text-area, we show a popup that the text-area field is required and the popup has a close button on it, when a user clicks close button, we put the focus back on text-area. In this case, the keypad opens up in IPhone but the user is not able to enter anything in the field.
If the user click outside the text-area field and then again clicks on the field, then user is able to enter text in the field.
Same thing works in android device but not working for IPhone.
Can anybody give me a suggestion of what to look for or how to handle this?
We are using the focus() method to set the focus on text-area.

iOS jumps and targets new field when using the autofocus

I have a login page that contains the usual email and password fields, as well as a log in button. For usability, the autofocus HTML5 attribute has been used on the email field.
When loading the page on iOS, you can tell by the green border that the field has the focus, but because of iOS limitations, the focus is not fully applied to the field, as you can see here with the keyboard not being displayed:
The first thing the user does is touches the email field, but as far as iOS is concerned, you're clicking on a different part of the page. The focus is actually given to the password field instead, because the page shifts upwards to make way for the keyboard that did not display previously:
In a similar behaviour, if the user touches on the password after page load, the log in button is clicked instead and validation errors appear.
Is there any way to solve this?
Why not disable the autofocus when you show the page on iOS?
It would be very annoying when user enter a website and the keyboard pops up without any actions on the page.
I even can't think of any website popping up the keyboard on the load.

Input Box inside an iframe

I have an input box inside and iframe. If i type and press the back key to erase the text, the back key event is taken as browser back and goes to the previous page. What could be the cause.?
please tell which browser you have tested with.
My guess would be that you have focus outside the field? is there a script putting focus on the document containing ths input box in the iframe?
i even cann't raise same event. I press BackSpace in iframe, I press BackSpace in input, I press BackSpace in main page.
Which browser do you work with?
Is there any javascript code in the page?
This is such an old browser behaviour. Update your browsers. In worst case scenario you can block the default events for the input element, using a jS library to get a unified response en browser events.

Categories