如何将设备的键盘更改为大写？

Question

这是我的input:

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

如何使用Ionic 2将设备的键盘更改为大写？

Answer 1

如果您只想将所有文本插入该字段的大写,您只需添加text-transform: uppercase;到该字段的CSS即可.

如果您实际上要求用户的键盘更改为"大写模式",那直到前一段时间才能实现,但是最近的浏览器(和Ionic)支持一个新的属性autocapitalize,该属性完全符合您的要求:输入具有autocapitalize属性集的元素为true将使虚拟键盘在移动设备上变为大写.

您可以在autocapitalize此处查看更多信息:https://developers.google.com/web/updates/2015/04/autocapitalize

所以你应该改变你ion-input的:

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

(其他autocapitalize选项是"单词"和"句子",我认为应该是不言自明的)

请记住,用户仍然可以手动将键盘调回小写,因此如果您确实要求输入文本为大写,则需要将其与text-transform: uppercase;CSS 结合使用.

Answer 2

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/>

根据 ionic 的评论更新，只需将 input 替换为 ion-input