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