鴻蒙開發（二十五）：輸入框型別

輸入框 TextInput 一共有 5 種輸入型別：

Normal

基本輸入模式。

支持輸入數位、字母、底線、空格、特殊字元。

範例：

TextInput({ placeholder: "請輸入內容" }) .type(InputType.Normal) .width(300) .height(50)

執行結果：

基本上什麽都能輸入，沒有什麽限制。

Password

密碼輸入模式。支持輸入數位、字母、底線、空格、特殊字元。密碼顯示小眼睛圖示並且預設會將文字變成圓點。

範例：

TextInput({ placeholder: "請輸入內容" }) .type(InputType.Password) .width(300) .height(50)

執行結果：

密碼框，輸入的內容不可見，點選右邊的眼鏡可切換可見模式。

當然了，我們也可以透過 showPasswordIcon 內容來主動設定這個眼睛是否啟用。

TextInput({ placeholder: "請輸入內容" }) .type(InputType.Password) .showPasswordIcon(false) .width(300) .height(50)

執行結果：

從執行結果來看，眼睛不見了。

Email

信箱地址輸入模式。支持數位，字母，底線，以及@字元（只能存在一個@字元）。

範例：

TextInput({ placeholder: "請輸入內容" }) .type(InputType.Email) .width(300) .height(50)

執行結果：

只能輸入信箱。

Number

純數位輸入模式。

範例：

TextInput({ placeholder: "請輸入內容" }) .type(InputType.Number) .width(300) .height(50)

執行結果：

只能輸入數位。

PhoneNumber

電話號碼輸入模式。

支持輸入數位、+ 、-、*、#，長度不限。

範例：

TextInput({ placeholder: "請輸入內容" }) .type(InputType.PhoneNumber) .width(300) .height(50)

執行結果：

只能輸入電話號碼格式。

至此，我們已經學會透過設定 TextInput 元件的 type 內容，來限制使用者的輸入。