手機端的文字輸入受到使用環境、網路狀況及裝置本身條件的制約，使其使用者體驗的改良成為乙個老生常談的話題。如：一直在改進的輸入法，新輸入方式的探索（語音輸入），甚至想盡種種辦法去避免輸入……
文字輸入本身是乙個從無到有的過程，是讓使用者將空白的輸入框填滿的過程，本文避談一些尚未經過易用性測試驗證的創新設計，從本人的日常積累和實際經驗出發，以文字輸入框作為設計物件，從幫助使用者認知及簡化使用者操作這兩個維度來**這些看似簡單空白的小條能否生長出大智慧型。
手機端的介面空間可謂寸土寸金，很少有空白的區域。而使用者在面對介面中一片空白的區域時往往會產生緊迫感甚至有些不知所措。如果在這片空白裡增加一些「引導詞」（即引導描述型詞條），使用者就能迅速產生認知活動，對將要輸入的內容進行快速反應和判斷。
就登陸介面的設計來說，面對無引導詞介面的使用者也許會浪費時間在想他的使用者名稱是什麼來著？是他的郵箱還是隨便起的暱稱還是他的手機號？以及他的密碼是幾位的？甚至還會浪費時間在使用者名稱的書寫格式上。而使用第二個介面的使用者會在第一時間獲知閃爍的游標處要輸入郵箱，密碼框裡的「小點點」也形象的告知了使用者密碼的顯示形式和長度。可見輸入框中增加必要的引導詞能夠提高使用者的輸入效率。
提供給使用者即將輸入內容的模板，使用者無需花費更多時間思考如何輸入。
[email protected]是約定俗成的郵箱位址的模板，能夠與使用者的心智模型相呼應，使用者能夠很快的做出反應。
輸入內容中有部分內容是使用者經常用到或重複用到的，或者是約定俗成的，那麼把這部分內容直接作為引導詞，顯示在文字輸入框中，一方面能夠提示使用者接下來將要輸入什麼內容，一方面能夠省略這部分內容的輸入操作，進而提高輸入效率。
「www.」和「.com」等是使用者所悉知的**協議，在輸入框中增加該引導詞能夠給使用者直觀的提醒這裡是要輸入**的，並且省略了這些字元的輸入。
使用者輸入的內容不準確會導致不準確的操作反饋時，需要增加對輸入內容的簡短描述，以降低這種誤操作的風險。
在多行文字的輸入框中，雖然有游標閃爍提示使用者輸入框已被啟用，可以輸入了，但是為了消除使用者在面對大片空白區域而產生緊張感也會增加引導性的文字，引導使用者輸入而不是點返回按鈕退出。
「說點兒什麼吧……」「吼一句」這些引導詞會讓使用者有親切感，引起使用者情感上的共鳴，激發使用者的操作慾望。
為了使文字的輸入效率更高，文字輸入框可以與一些控制項進行關聯,依靠這些控制項來簡化或方便使用者對輸入文字的編輯操作。歸納幾種輸入框常用的附加控制項如下：
某些特定條件的輸入內容本身就是乙個單位，如收件人的郵箱位址，收信人的**，好友的名稱等。將每個單位轉化為控制項按鈕，可以方便使用者對單位資訊進行編輯操作。
新增收件人的輸入操作中，輸入的每個收件人名字自成乙個單位，以分號隔開顯示，當輸入框再次獲得焦點時每個單位文字變成控制項按鈕。編輯時可以就某個單位進行單獨編輯，或刪除，提高整體輸入效率。
單位控制項的樣式需結合具體的輸入內容進行設計，可以是按鈕形態，也可以是其他形態。位置可以在輸入框內部也可以在外部，依具體情況而定。
在手機上輸入文字困難，刪除大段的不必要文字同樣困難，在設計時需要根據使用者的使用情景充分考慮這一需求，使輸入框附加一鍵刪除按鈕。
瀏覽器位址列中的「位址輸入框」常常需要使用者將其清空重新輸入新的位址，因此當已有內容的位址列獲得焦點時，在輸入框內增加乙個清除按鈕，方便使用者快速的清空現有內容，開始新的內容輸入。
在微博的編寫過程中，使用者常常輸入了一段文字後感覺並不是合適的，需要重新輸入，此時輸入框中的清除按鈕就可以讓使用者快速清除當前輸入的所有文字。
刪除控制項多位於輸入框末端。在單行文字輸入框內為了節省空間刪除控制項可以是隱藏的，與文字選擇進行關聯。
手機中關於文字輸入的字數有很多限制，比如每條手機簡訊限制160個字元，微博限制140個漢字等等，使用者常常會因為不知道限制條件或者忘記了限制條件而進行了誤操作，浪費了時間。那麼在輸入框中增加提醒控制項，提醒使用者目前還有多少個字元可以輸入，避免使用者輸入超出字數限制。
該控制項多內嵌於輸入框中的右下腳，並與輸入內容本身在顏色或字型大小上做區分設計，不能喧賓奪主，打擾使用者的輸入過程。
設計手機文字輸入框時，以使用者需求為出發點，結合使用場景，在空白的輸入框樣式中增加引導詞、附加一些小控制項的設計手段可以幫助使用者對將要輸入的內容有更好的理解和把握，減少使用者在輸入過程中產生的錯誤，方便使用者對已輸入的內容進行編輯和修改，達到提高使用者輸入效率的目的。
當然這些「無中生有」的設計策略，在實施時要注意樣式的展示和互動上的細節，盡量做到簡潔、低調，因為輸入的文字才是使用者在輸入過程中需要重點關注的物件，不要讓複雜的設計打擾使用者。
【本文首發於：
【
文字框限制輸入型別的輸入框
最近在開發完乙個專案後，又測試人員測試bug，然後我根據他們測試出來的bug乙個乙個的改，然後就遇到了乙個問題，文字框是用來搜尋，但是，比如這個文字框是用來搜尋年齡的區間，輸入條件的時候，如果輸入了非數字的字元就不能輸入。像這樣的問題，其實可以通過正規表示式來做的，我們開發的專案中是已經有相應的正規...
手機號輸入框的優化
在前端開發中，我們經常會遇到使用者輸入手機號的情況，比如手機號註冊 登入，收集使用者的手機號資訊等。如果我們要想把使用者體驗做到極致，至少要包含以下兩條需求 1.輸入框只能輸入數字 2.輸入框最多只能輸入11個字元 通常情況下，開發人員的解決方法就是把input標籤的type屬性設定為number，...
移動端，input輸入框被手機輸入法解決方案
當介面元素靠下時候的時候，input輸入框會被系統的鍵盤遮擋。我們可以讓介面向上移動一定距離去避免遮擋。money click function 300 基於jquery寫的事件。首先繫結觸發元素 input 框，scrollintoview alignwithtop 屬性滾動瀏覽器視窗或容器元素，...