How to inform the mobile keyboard about the desired input for a html input control?

Question

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:

1. it tries to make me start typing a capital letter as the first char
2. it adds a space after a "."
3. it tries to make me start typing a capital letter after a '.'

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):

1. press caps lock twice (so the first letter capital constraint is bypassed)
2. type j. (and two chars are ok, but the keyboard adds a space after the '.')
3. press left keyboard (to position the cursor just after the '.')
4. press caps to lock twice (to remove again the capital constraint after '.')
5. type doe

and 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!

Answer 1

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");