on-input組件是作為文本輸入組件，和html中的類型為text的input類似，但是它不能作為checkbox,radio,toggle,range,select這些input來使用。
此外，和html5中相同，ion-input也有text,password,email,number,search,tel和url這些類型。
相關屬性
input有以下屬性：
- type : HTML的input類型，有(text, password, email, number, search, tel, 或 url)
- placeholder : 同html中的用法
- clearInput : 是否在后面顯示小叉
- value : input的值
- disabled ： 是否禁用
- mode : 暫時沒有發現怎么用
- clearOnEdit : 暫時沒有發現怎么用
用法如下:
<ion-content padding> <ion-list> <ion-item> <ion-label color="danger">inline label</ion-label> <ion-input color="danger" placeholder="inline label" clearOnEdit="true"></ion-input> </ion-item> <ion-item> <ion-label color="danger" fixed>fixed label</ion-label> <ion-input placeholder="fixed label" clearInput disabled="true" ></ion-input> </ion-item> <ion-item> <ion-label>number</ion-label> <ion-input type="number"></ion-input> </ion-item> </ion-list> </ion-content>浮動顯示標簽和固定顯示標簽
常用的input有三種和標簽組合方式：
- 無標簽，通過placeholder方式展示需要輸入的內容
- floating,不輸入時標簽和input一行，當input輸入內容后label浮到上一行
- stacked,固定浮在input上面一行
使用方式如下：
<ion-item> <ion-label floating>floating</ion-label> <ion-input placeholder="floating"></ion-input> </ion-item> <ion-item> <ion-label stacked>stacked</ion-label> <ion-input placeholder="stacked"></ion-input> </ion-item>focus和blur事件
利用angular2的方法，調用blur和focus方法
使用方式如下：
<ion-input placeholder="floating" (blur)="blurInput()" (focus)="focusInput()"></ion-input>typescript代碼如下：
export class InputPage{ constructor(public navCtrl:NavController){ } blurInput(){ console.log("blur"); } focusInput(){ console.log("focus"); } }
作者：nickylau82
鏈接：https://www.imooc.com/article/15014
來源：慕課網