5

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!

Denis Tabac
  • 43
  • 1
  • 4
UnDiUdin
  • 14,924
  • 39
  • 151
  • 249
  • 1
    you could manipulate the input no matter what the keyboard does, for example trim the text and lowecase it on keyup event – john Smith Nov 15 '21 at 09:54

4 Answers4

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.

Rickard Elimää
  • 7,107
  • 3
  • 14
  • 30
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();
  .....

};
dee
  • 2,244
  • 3
  • 13
  • 33
  • 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? – UnDiUdin Nov 15 '21 at 15:36
1

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

Sandro
  • 1,051
  • 7
  • 15
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");
Giuseppe Menegoz
  • 774
  • 3
  • 8