Is there a way to inform the mobile keyboard on a mobile device that the possible values for an HTML input field are a subset of the possible values?
I try to express myself better with an example.
Let's say i have a username input text:
<input type="text" id="username">
when trying to type with a mobile device the mobile keyboard will do three non desired things:
So if I want to type j.doe (an example of a typical username)
and I type (one at a time): j . d o e
I obtain J. Doe
I could, being an advanced mobile keyboard user, try to obtain the desired results by doing (for example on Swiftkey that has navigation arrows):
j. (and two chars are ok, but the keyboard adds a space after the '.')doeand I am done, but for an inexpert user, this is unacceptable (especially (1), (3), and (4)).
Somehow I would like that the keyboard behaves like one typing in a password field (no Caps Lock automatically activated and no spaces added after '.').
I did not manage to find a solution, does anyone knows a way to achieve the result?
Thanks!
Try turning off mobile auto fix-ups using these HTML attributes:
<input type="text" id="username"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
autocorrect="off"/>
source: https://weblog.west-wind.com/posts/2015/jun/15/turn-off-html-input-auto-fixups-for-mobile-devices
I googled "ios input lowercase" and this was the first hit:
iPhone browser defaulting to uppercase for first letter of password fields
In short, add the attributes autocapitalize="none" on the input field, and throw in a autocomplete="off" and autocorrect="off" for good measures.
You will need to add autocorrect and autocapitalize props to the input tag and set them to be disabled.
Ex:
<input type="text" id="username" autocorrect="off" autocapitalize="none">
Blog with explanation on the same
or onkeydown you could convert the keyed value to lowercase
onkeydown = function keyDown(e) {
let keyPressed = String.fromCharCode(e.keyCode).toLowerCase();
.....
};
To be really sure that the field is not capitalize you can set its type to be email
<input type="email" id="loginId" autocapitalize="off" autocomplete="off" spellcheck="false" autocorrect="off"/>
No validation is done, so you can still enter a username in a "email" field.
to obtain this in JS
var loginInput=document.getElementById("loginId");
loginInput.setAttribute("type","email");