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

Question

. 。 Answers to this question are eligible for a +500 reputation bounty. LaBracca is looking for an : 的：

i was not able to find in internet a solution to this problem, so i hope some expert may suggest a way, even a tricky one, to obtain the desired result.

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 . doe j . doe 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

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.

Answer 2

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();
  .....

};

Answer 3

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

Answer 4

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

Answer 5

HTML5 specifies the autocomplete attribute for form controls. The standard also defines username as a possible value, although the meaning of this value simply states:

A username

I am guessing this hint is enough to tell the browsers what they're supposed to do:

 <p><label>Username:<br> <input type="text" id="username-1" autocomplete="username"></label></p>

The attributes described in other answers are non-standard.