How to change the device's keyboard to uppercase?

Question

Here is my input:

<ion-item>
      <ion-label color="primary">Nickname</ion-label>
      <ion-input formControlName="nickname" [(ngModel)]="nickname"></ion-input>
</ion-item>

How to change the device's keyboard to uppercase using Ionic 2?

Answer 1

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.