本文從輸入框的定義、使用場景、相關(guān)組件、交互說明都有詳細的分析，作者還附上輸入框的源文件供大家參考學(xué)習(xí)。

往期回顧：

定義

通過鼠標或鍵盤輸入文字、字母、數(shù)字、符號內(nèi)容。

使用場景

• 填寫表單時；
• 需要輸入文本數(shù)據(jù)時。

相關(guān)組件

• 當僅需要輸入數(shù)字時，使用 InputNumber 數(shù)字輸入框；
• 當進行搜索時，使用 Search 搜索框；
• 當需要進行包含圖片、文本等內(nèi)容的復(fù)雜輸入時，使用 RichText 富文本編輯器。

交互說明

1. CASE1 輸入框高度說明

輸入框根據(jù)行數(shù)分為三種類型：單行輸入框、定高文本域、自適應(yīng)高度文本域。

2. CASE2 輸入框?qū)挾日f明

• 輸入框?qū)挾雀鶕?jù)實際情況確定，寬度固定無自適應(yīng)；
• 為方便閱讀，不可過寬（具體寬度由 UI 定義）。

3. CASE3 輸入內(nèi)容說明

• 可輸入文字、字母、數(shù)字、符號；
• 如無特殊說明，不可輸入 emoji 表情；
• 如無特殊說明，第一個字符不可為空格或回車；
• 過濾文本樣式、鏈接;
• 輸入的內(nèi)容為保密信息時，顯示圓點，不直接顯示字符。

4. CASE4 控件狀態(tài)說明

輸入框共分為啟用、聚焦、禁用、輸入中、加載、報錯、符合條件 7 種狀態(tài)。

5. CASE5 暗提示說明

未輸入任何內(nèi)容時，輸入框中需顯示暗提示：

6. CASE6 字數(shù)限制說明

輸入框必須對可輸入的字數(shù)進行限制，分為以下兩種限制方式：

源文件

下載鏈接: https://pan.baidu.com/s/1aq7dc2Iv3qpEF6g2PVF5uA 提取碼: ridu

備用下載鏈接：https://share.weiyun.com/5xrRyZ0

歡迎關(guān)注作者的微信公眾號：「愚者筆記」