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!

Toluca

you could manipulate the input no matter what the keyboard does, for example trim the text and lowecase it on keyup event – Mignon

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

Thracian

what a great trick! This works perfectly, and in fact it is what I need Thanks a lot! – Toluca

all the other solutions does not work, so i award the bounty to you. Thanks – Toluca

Answer 2

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.

Leatherneck

Answer 3

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

};

Vilmavim

thank you, i tried this solution but it does not work. from a mobile device even if i set the four attributes as explained in the linked blog page still the behavior is the same. any idea? – Toluca

Answer 4

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

Unfix

autocapitalize=off was deprecated in iOS 5.0. Use none instead. – Feathercut