I have a simple registration form based on Material UI and React Final Form.
Email and password inputs are filled automatically by Chrome autofill if it is possible. The email field has autofocus on it. When the form is autofilled, inputs become "blocked" for mouse interaction (I cannot not place or see caret, cannot select part of email, no autofocus is applied), yet it is available for drag-and-drop copy with mouse and keyboard interaction. I have no idea how can this happen and do not understand, how to provide code for reproduction. Maybe some autofocus issue? Hope that anyone could help.
Related
I know it sounds a bit confusing, but I have an angular app that is supposed to run only on a mobile device with a barcode reader that automatically writes what it reads inside the focused input field.
I setted the app so that when the page is loaded my input field has focus and I want that the soft keyboard to be invisible so the user cannot manually write in this field.
The flow should seem like this: input -> autofocus -> (onFocus)="hideKeyboard()"
Autofocus is a custom directive that sets the dom element to be the focus in ngOnInit.
Thanks in advance for any tip.
There's a start here in this project, but when you click outside of the input (in the button) lose focus and the keyboard is hidden again. But yet, it's a start...
Try something like this.
<input id="id1" class="hidekeyboard"/>
$('#id1').<input_type>({
/* options */
});
$('.hidekeyboard').on('focus',function(){
$(this).trigger('blur');
});
I have a problem with my webapp.
Is there a way to hide the android keyboard on text input focus without losing the focus on the input?
Focus on page load works fine, because the field is focused and no keyboard is shown. I want the same behavior after re-focus on input.
Thank You
Maybe you should give keyboard customizing apps a try...might work. I personally prefer Redraw Keyboard, but there are many out there to choose from.
As part of my login and registration forms, if there are errors then it will autofocus the related field. Actually, it not as simple as I thought. Let me try to explain!
Basically, on this project, pages are loaded with AJAX. Forms may include an autofocus attribute. This works great, but on mobile it just shows the cursor without bringing up the keyboard, meaning you still have to tap the input to start typing.
Am I missing something, or do I have to double-up the focussing with something like
document.querySelector("[autofocus]").focus();
// with appropriate verification that the element exists, of coursr
In mobile devices (at least in Apple's Safari), the keyboard isn't allowed to show up without the user clicking on the input field. It's by design, and I don't think there is much you can do about it.
http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-Javascript-how-can-I-launch-the-on-screen-keyboard
I'm confused about how Chrome decides what forms to autofill. By autofill I mean the inputs are highlighted in yellow and already completely filled in when you land on the page (see picture below). I do not mean autocomplete which is where the input is blank and you get a suggestion only when you start typing in it.
Here's the autofill rules as I understand them:
If your form is located on its own url, e.g., http://mysite.com/login
Your form is present on page load and is NOT loaded via ajax
Comparing my site with Dropbox's we both have a login page: http://localhost/login vs. https://www.dropbox.com/login which satisfies rule #1. The login form gets autofilled for both of us.
My problem is with rule #2. On Dropbox's homepage, www.dropbox.com, they have a "sign in" modal (see picture below) that gets autofilled. On my homepage, http://localhost, I have an identical modal which does NOT ever get autofilled.
I can't figure what the deal is here, can someone chime in? Is it just a localhost vs. real URL issue? If so, how do you explain why http://localhost/login gets autofilled?
When you log into a new site chrome will drop down its notification bar at the top and ask you if you want to save the password, if you tell it "Never" it wont ask again and it wont ever autofill
To get form fields to autofill like street, address, etc, a good answer by kmote
How to trigger Autofill in Google Chrome?,
I use this to detect enter:
<input type="submit" name=hiddenbutton value=enter style="display: none">
When this is placed before all other form elements, then I get the appropriate $_REQUEST[hiddenbutton]when enter was used to submit the form.
Except with Chrome and other Webkit-based browsers, which don't activate the first button when enter is pressed.
Is there a way to make it work on all browsers? (preferably with as little JavaScript as possible)
I would recomend adding a focus listener to make sure the user is not justdoing something completely different like typing in a word document, because some browsers will detect key clicks without focus