How to change the device's keyboard to uppercase?

If you just want to make all text inserted to that field uppercase, you can just add text-transform: uppercase; to the field's CSS and that will do it.

If you actually require that the user's keyboard changes to "uppercase mode", that wasn't possible until a while ago, but recent browsers (and Ionic) support a new attribute called autocapitalize which does exactly what you want: Input elements with the autocapitalize attribute set to true will make the virtual keyboard uppercase on mobile devices.

You can see more info on autocapitalize here: https://developers.google.com/web/updates/2015/04/autocapitalize

So you should change your ion-input to:

<ion-input formControlName="nickname" 
           [(ngModel)]="nickname" 
           autocapitalize="characters">
</ion-input>

(The other autocapitalize options are "words" and "sentences", which I believe should be self-explanatory)

Just remember that the user can still turn their keyboard back to lower-case manually, so if you really require that the input text be uppercase, you'll need to combine this with text-transform: uppercase; in CSS.


1. No Capitalization
    <input autocapitalize=off/>
    <ion-input autocapitalize=off/>
    <br/>
2. Characters Capitalization
    <input autocapitalize=characters/>
    <ion-input autocapitalize=characters/>
    <br/>
3. Words Capitalization
    <input autocapitalize=words/>
    <ion-input autocapitalize=words/>
    <br/>
4. For sentence
    <input autocapitalize=sentences/>
    <ion-input autocapitalize=sentences/>
    <br/>

Updated as per comments for ionic just replace input with ion-input

Tags:

Angular

Ionic2