CODEWITHSUNDEEP
javascripthtmlinputuser-experience
UnDiUdin
UnDiUdin

Reputation: 15384

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

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!

Upvotes: 5

Views: 1930

Answers (4)

Giuseppe Menegoz
Giuseppe Menegoz

Reputation: 774

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

Upvotes: 1

dee
dee

Reputation: 2424

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

};

Upvotes: 2

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

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.

Upvotes: 2

Sandro
Sandro

Reputation: 1061

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

Upvotes: 1

Related Questions