對(duì)于使用中文輸入法的我來來說，文本框中不斷切換中英文是最麻煩的事情，雖然很多時(shí)候我們已經(jīng)習(xí)慣了這種切換，不過在盡可能的情況，是不是因該把某些中文文本框設(shè)置得更合理一些?

我一直覺得，文本框的這個(gè)東西，在有輸入法的國(guó)家，是我們這些懶人的杯具，文本框的自動(dòng)完成功能，在配合輸入法下，簡(jiǎn)直是個(gè)雞肋。一次次的切換Ctrl+Space，是否有讓你崩潰想敲爛鍵盤呢?

上面的那張圖已經(jīng)很明顯的讓我們感覺到了三個(gè)問題：

輸入法把自動(dòng)完成遮擋住了，我看不見。

使用鍵盤↑↓鍵只能切換輸入法內(nèi)的選字，無法選擇自動(dòng)完成內(nèi)的選項(xiàng)。想用卻用不到。

當(dāng)你懊惱的打算用鼠標(biāo)去點(diǎn)自動(dòng)完成列表內(nèi)的文字時(shí)，杯具發(fā)生了，你發(fā)覺，你點(diǎn)了，事實(shí)上什么效果都沒有。你的文本框變成一遍空白。(在Chrome下多種中文搜索引擎有此問題，杯具啊。)

備注：經(jīng)過筆者測(cè)試多種搜索引擎在不同瀏覽器的呈現(xiàn)效果，這三個(gè)問題出現(xiàn)的幾率各不相同，但在chrome下這三個(gè)問題非常明顯。(Chrome渲染有問題?)

關(guān)于問題一

在Chrome下似乎沒有解決方案，所有的搜索引擎表現(xiàn)都如文章開頭的圖片的效果。

IE下，大部分的搜索引擎都采用了一種笨可是最有效的方法：只有文字被完全輸入到文本框內(nèi)后，自動(dòng)完成才出現(xiàn)，這樣就避免了遮擋的問題了。

在FF下，大部分搜索引擎也是采用與IE內(nèi)的做法，隱藏自動(dòng)完成。當(dāng)然，也有笨家伙：百度和有道，在FF下依然還是遮擋住了。

關(guān)于問題二

因?yàn)樵贗E與FF下大部分搜索引擎采用了上訴的的方法避免了出現(xiàn)輸入法與自動(dòng)完成，所以這個(gè)問題主要是出現(xiàn)在Chrome內(nèi)。從實(shí)際的測(cè)試中發(fā)現(xiàn)，國(guó)外的搜索引擎表現(xiàn)更佳。

在Chrome的Google與bing搜索，如果使用↑↓鍵，是可以選中自動(dòng)完成的，當(dāng)然，你的輸入法選字也同時(shí)切換了。

當(dāng)然，也有笨家伙：Chrome下的所有中文搜索引擎，以及FF下的百度和有道，依然還是無法使用↑↓鍵選擇自動(dòng)完成。

關(guān)于問題三

好了，我就直接說笨家伙吧，這次上榜的還是百度與有道。但是百度這次可以欣慰了：有道墊底了。有道在FF與Chrome下鼠標(biāo)點(diǎn)擊自動(dòng)完成后，文本框都會(huì)自動(dòng)消失。百度只在Chrome下出現(xiàn)此問題。

說明這些問題并不是表示我強(qiáng)烈的鄙視中文搜索引擎，相反我更愛好他們。但我們需要考慮的問題是：在設(shè)計(jì)文本框的時(shí)候，是否應(yīng)該更加考慮到一個(gè)現(xiàn)實(shí)：所有的中文用戶都在用輸入法輸入文本框。我們的操作比英文用戶更復(fù)雜。

在輸入的時(shí)候，中文用戶多了一個(gè)翻譯的步驟，把鍵盤上的字母翻譯為中文漢字。這也是中文用戶偏愛鼠標(biāo)操作的原因，因?yàn)檩斎氲墓ぷ魈珡?fù)雜了，雖然我們的輸入法在近幾年有著超越的發(fā)展，但對(duì)于用戶而言，這種門檻還是存在的。——至少我的爸媽想使用電腦打字，他們就不得不去學(xué)拼音。

那么，為了使用戶少按一次ctrl+space，讓用戶操作更流暢，在文本框的設(shè)計(jì)上，我們必須更加細(xì)致與謹(jǐn)慎。我個(gè)人總結(jié)有以下幾個(gè)方法。

禁用輸入法

如果某些文本框只允許用戶輸入字母符號(hào)以及數(shù)字(如登陸界面的“用戶名”)，那就禁用輸入法吧。

網(wǎng)易郵箱的登陸界面就采用了這種方法，Web界面的實(shí)現(xiàn)手段很簡(jiǎn)單，只需在CSS代碼內(nèi)加上：ime-mode:disabled;

當(dāng)然，目前很多產(chǎn)品的登陸界面都進(jìn)行了相同的處理，不妨挖掘下更多產(chǎn)品內(nèi)部的文本框吧。如驗(yàn)證碼輸入框。

用戶輸入之后才提供響應(yīng)

只有用戶把文字輸入到文本框內(nèi)才提供響應(yīng)，這是主要是針對(duì)一些自動(dòng)完成和即時(shí)搜索(輸入后自動(dòng)搜索)功能的。

windows7的資源管理器的搜索框?yàn)榧磿r(shí)搜索，但文字還在輸入法內(nèi)時(shí)，它并不啟動(dòng)搜索。這樣的設(shè)計(jì)能讓界面更簡(jiǎn)潔且讓用戶容易理解。

提供正確的鍵盤反饋

如前面Chrome的下的Google，還是支持↑↓鍵選擇自動(dòng)完成的，這樣至少保證了，在使用輸入法的時(shí)候，用戶的一些按鍵還是有效的。

當(dāng)然，我也見過一種很白癡的界面，他對(duì)Enter鍵的感知錯(cuò)誤(Enter鍵在輸入法內(nèi)常用作用是輸入英文字母)，截圖我無法找到，但大致是這樣。

注：下圖是我PS用以說明問題案例（因?yàn)闀簳r(shí)找不到真實(shí)案例），并不代表其真實(shí)情況如圖所示。

按下Enter之后，系統(tǒng)自動(dòng)響應(yīng)了默認(rèn)的“登錄”按鈕，但事實(shí)上我只是想把郵件地址輸入文本框而已。明顯的鍵盤反饋錯(cuò)誤。

用戶輸入之后才提供響應(yīng)

只有用戶把文字輸入到文本框內(nèi)才提供響應(yīng)，這是主要是針對(duì)一些自動(dòng)完成和即時(shí)搜索(輸入后自動(dòng)搜索)功能的。

windows7的資源管理器的搜索框?yàn)榧磿r(shí)搜索，但文字還在輸入法內(nèi)時(shí)，它并不啟動(dòng)搜索。這樣的設(shè)計(jì)能讓界面更簡(jiǎn)潔且讓用戶容易理解。

嘗試使用拼音識(shí)別

毫無疑問，拼音識(shí)別能夠有效幫助中文用戶，就算他沒有使用輸入法，同時(shí)也有可能幫他糾正一些漢字輸入錯(cuò)誤。

史上最佳中文文本框?

我把這個(gè)講頒給QQ郵箱的寫信頁面收件人文本框，原因有三個(gè)：禁止輸入法，塊狀結(jié)構(gòu)，拼音識(shí)別。如果你把聯(lián)系人都加了中文名字(火星文就沒辦法了)，試試輸入10個(gè)人的郵箱地址，你的速度有多快?告訴你，我只需要25秒。

從圖中可以查出，這個(gè)文本框是支持拼音識(shí)別的，同時(shí)，他采用了塊狀結(jié)構(gòu)，郵件地址是整塊被刪除或增加的。

無疑QQ的設(shè)計(jì)值得學(xué)習(xí)。

史上最差中文文本框?

我要把這個(gè)獎(jiǎng)?lì)C給新浪微博的登陸框，當(dāng)然，他們最近改進(jìn)了這個(gè)設(shè)計(jì)，不過，這個(gè)反例，值得我們吸取教訓(xùn)。(來自Fenng)

如果在這個(gè)圖內(nèi)還存在輸入法的輸入框呢?夠杯具了吧,OK,我想這個(gè)圖已經(jīng)算是文本框設(shè)計(jì)的經(jīng)典反例了,歡迎大家膜拜學(xué)習(xí)。

寫在最后

文本框是一個(gè)很細(xì)節(jié)的東西，因?yàn)樗麑儆谝粋�(gè)用戶信息收集的有效控件。而我們的中文用戶，值得擁有它們自己的特色文本框。

在設(shè)計(jì)的同時(shí)，我們更應(yīng)該考慮到用戶的輸入法狀態(tài)。

文中的測(cè)試皆采用搜狗拼音輸入法測(cè)試，如有不正確的，還請(qǐng)指正。