open android and ios keyboard with uppercase using html

Question

i am creating a web page for mobile devices. In that there are few input fields which require user to always enter data in uppercase.

I looked at few options like

1. text-transform property of css
   It changes user input to uppercase but it also changes the placeholder. That doesn't looks good.
2. autocapitalize attribute for input
   By setting it on, it allows keyboard to open in caps. But this doesn't seems to work for me. It works perfectly with textarea but not with input in android.

Is there any better way to achieve this?

Answer 1

You should be able to bind to a keydown or keypress event (I'd use jQuery) and modify the input.

It won't affect the soft keyboard; maybe you can use this along with autocapitalize?

Answer 2

So just to add some more information for future users, here is an example where all displayed text will be in caps and the virtual keyboard will also show in all caps.

Note that custom keyboards like swift apparently do not work but the builti in ones do.

Changes are done through inputProps

    <TextField
  name={props.name}
  value={props.val}
  inputProps={{autocapitalize:"characters", textTransform:"uppercase"}}
  onChange={props.doStuff}

/>

Answer 3

try adding autocapitalize="characters" to input, it worked for me on Android, and it should work on other kind of devices as MDN web docs says here:

The autocapitalize attribute doesn’t affect behavior when typing on a physical keyboard. Instead, it affects the behavior of other input mechanisms, such as virtual keyboards on mobile devices and voice input.