從實(shí)習(xí)到現(xiàn)在，入行一年多，踩過無數(shù)的坑……踩得坑多了，路就知道怎么走啦，下面是針對(duì)輸入框的一些注意細(xì)節(jié)的小結(jié)。

輸入框的一次性清除

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

對(duì)策：當(dāng)輸入框內(nèi)容不為空的時(shí)候獲得焦點(diǎn)，則展示一次性清除內(nèi)容的按鈕，適用于APP與網(wǎng)站。

輸入大陸號(hào)碼或身份證的展示

場(chǎng)景：A預(yù)定機(jī)票，輸身份證少了一位數(shù)（此時(shí)還不知道），直到點(diǎn)擊提交按鈕/或者輸完后，才彈出錯(cuò)誤提示“您的身份證格式不正確”……

對(duì)策：? 對(duì)于手機(jī)的輸入設(shè)置成3-4-4格式，身份證的輸入設(shè)置成6-8-4格式，便于用戶能夠清楚及時(shí)了解到自己輸入的號(hào)碼有無缺漏?！緦?duì)于身份證與手機(jī)，保存后可將中間幾位數(shù)變成*號(hào)，畢竟是敏感信息】

輸入多文字后的“袒露”

場(chǎng)景：A幫B預(yù)定機(jī)票，A填寫報(bào)銷憑證的快遞地址，輸入一大串的文字，然后給B確認(rèn)，發(fā)現(xiàn)快遞地址沒寫完……

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

指定輸入框的鍵盤類型

場(chǎng)景：A預(yù)定機(jī)票填寫手機(jī)號(hào)，結(jié)果彈出默認(rèn)的鍵盤類型，還需要自己切換成數(shù)字鍵盤……

對(duì)策：手機(jī)號(hào)—數(shù)字鍵盤；身份證—身份證鍵盤；英文名—英文鍵盤；中文—中文鍵盤……【如果某按鈕被鍵盤遮住，要點(diǎn)擊按鈕的話，需要將鍵盤縮回哦】。

tip：如果規(guī)定了輸入長(zhǎng)度，輸完后可自動(dòng)將鍵盤縮回。如某輸入框規(guī)定輸入4位數(shù)字，用戶輸完4位數(shù)字后鍵盤自動(dòng)縮回，而不需要用戶自己再點(diǎn)擊一次縮回~

輸入框的輸入記錄

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

對(duì)策：對(duì)輸入框的內(nèi)容進(jìn)行記錄。

輸入框的字?jǐn)?shù)限制

場(chǎng)景：A在某軟件進(jìn)行長(zhǎng)篇文章的輸入，當(dāng)準(zhǔn)備發(fā)表的時(shí)候卻提示文字字?jǐn)?shù)過多……（實(shí)驗(yàn)了一下，微信就是這樣子，呃呃呃呃）

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

輸入框的字?jǐn)?shù)計(jì)算順序

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

對(duì)策：說實(shí)話，這個(gè)就只能改變限制長(zhǎng)度的位數(shù)

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

下面兩張圖是因?yàn)楦鶕?jù)展示的方式不同，微博計(jì)算字?jǐn)?shù)的方式也不同（輸入一大串哈哈哈，最后只能再輸入3個(gè)字）

對(duì)于iPhone，輸入中文字，打拼音的時(shí)候，字母是直接在輸入框展示，此刻輸入框就開始計(jì)算字?jǐn)?shù)了

對(duì)于Android，輸入中文字，打拼音選漢字才在輸入框展示，而此刻輸入框才計(jì)算字?jǐn)?shù)

所以之前說的場(chǎng)景，輸入“yangyangyangyang”已經(jīng)是8位了，超過規(guī)定的4位，所以就不能輸入啦，還有另一個(gè)辦法就是用簡(jiǎn)音“yyyy”~~~~

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

對(duì)于上面所說的細(xì)節(jié)，可以靈活組合一起，如 身份證的輸入框+一次性刪除+自動(dòng)縮回鍵盤 .

輸入框的控件細(xì)節(jié)大致就這些，這是我第一次寫稿，如有不足請(qǐng)多多包涵。

本文由 @小幸兒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自u(píng)nsplash，基于CC0協(xié)議