從實習到現在，入行一年多，踩過無數的坑……踩得坑多了，路就知道怎么走啦，下面是針對輸入框的一些注意細節的小結。

輸入框的一次性清除

場景：A在某個輸入框輸入十幾個字，突然想把全部刪除，苦逼的Ta還得一直按刪除鍵，一個個字符刪……

對策：當輸入框內容不為空的時候獲得焦點，則展示一次性清除內容的按鈕，適用于APP與網站。

輸入大陸號碼或身份證的展示

場景：A預定機票，輸身份證少了一位數（此時還不知道），直到點擊提交按鈕/或者輸完后，才彈出錯誤提示“您的身份證格式不正確”……

對策：? 對于手機的輸入設置成3-4-4格式，身份證的輸入設置成6-8-4格式，便于用戶能夠清楚及時了解到自己輸入的號碼有無缺漏?！緦τ谏矸葑C與手機，保存后可將中間幾位數變成*號，畢竟是敏感信息】

輸入多文字后的“袒露”

場景：A幫B預定機票，A填寫報銷憑證的快遞地址，輸入一大串的文字，然后給B確認，發現快遞地址沒寫完……

對策：當輸入多行或者多文字的時候，超出輸入框的文字“袒露”一部分出來，讓用戶知道原來還有文字【對了，還需要規定可輸入多少行，單行，還是2行、3行、4行……隨著輸入的文字輸入框的高度也會產生變化，直到規定的行數】

指定輸入框的鍵盤類型

場景：A預定機票填寫手機號，結果彈出默認的鍵盤類型，還需要自己切換成數字鍵盤……

對策：手機號—數字鍵盤；身份證—身份證鍵盤；英文名—英文鍵盤；中文—中文鍵盤……【如果某按鈕被鍵盤遮住，要點擊按鈕的話，需要將鍵盤縮回哦】。

tip：如果規定了輸入長度，輸完后可自動將鍵盤縮回。如某輸入框規定輸入4位數字，用戶輸完4位數字后鍵盤自動縮回，而不需要用戶自己再點擊一次縮回~

輸入框的輸入記錄

場景：A在某網站進行登錄，輸入自己用戶名，第二天登錄該網站又得重新輸入（設置了瀏覽器保存用戶名和密碼就另說了~~）

對策：對輸入框的內容進行記錄。

輸入框的字數限制

場景：A在某軟件進行長篇文章的輸入，當準備發表的時候卻提示文字字數過多……（實驗了一下，微信就是這樣子，呃呃呃呃）

對策：對于可輸入大量文字的輸入框（限制字數），如知乎的發表問題、可采取字數數目的展示，這樣子就可以讓用戶知道我輸入了多少字，我還能再輸入多少字。

輸入框的字數計算順序

場景：一個只能支持長度為4位（一個中文算一位，2個字母算一位）的昵稱，A在Android端手機順利輸進（全拼輸入）“羊羊羊羊”，一天Android 手機摔了，小A買了愛瘋，然后想改昵稱，卻發現輸不了（全拼輸入）“陽陽陽陽”……【這是為什么呢，由圖見分解】

對策：說實話，這個就只能改變限制長度的位數

下面兩張圖分別是輸入拼音的展示

下面兩張圖是因為根據展示的方式不同，微博計算字數的方式也不同（輸入一大串哈哈哈，最后只能再輸入3個字）

對于iPhone，輸入中文字，打拼音的時候，字母是直接在輸入框展示，此刻輸入框就開始計算字數了

對于Android，輸入中文字，打拼音選漢字才在輸入框展示，而此刻輸入框才計算字數

所以之前說的場景，輸入“yangyangyangyang”已經是8位了，超過規定的4位，所以就不能輸入啦，還有另一個辦法就是用簡音“yyyy”~~~~

目前發現的iphone與android的文字展示至輸入框的順序不一致，不知道系統更新版本之間（如ios11與ios10）的會不會也不同，這有待研究，because我不是擁有多部愛瘋的膩~~

對于上面所說的細節，可以靈活組合一起，如 身份證的輸入框+一次性刪除+自動縮回鍵盤 .

輸入框的控件細節大致就這些，這是我第一次寫稿，如有不足請多多包涵。

本文由 @小幸兒 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自unsplash，基于CC0協議