文本框可以讓用戶輸入文本。它們可以是單行的,帶或不帶滾動條,也可以是多行的,并且?guī)в幸粋€圖標(biāo)。點擊文本框后顯示光標(biāo),并自動顯示鍵盤。除了輸入,文本框可以進(jìn)行其他任務(wù)操作,如文本選擇(剪切,復(fù)制,粘貼)以及數(shù)據(jù)的自動查找功能。詳情見 模式 > 選擇 文本選擇的設(shè)計。
文本框可以有不同的輸入類型。輸入類型決定文本框內(nèi)允許輸入什么樣的字符,有的可能會提示虛擬鍵盤并調(diào)整其布局來顯示最常用的字符。常見的類型包括數(shù)字,文本,電子郵件地址,電話號碼,個人姓名,用戶名,URL,街道地址,信用卡號碼,PIN 碼,以及搜索查詢。
當(dāng)文本輸入光標(biāo)到達(dá)輸入?yún)^(qū)域的最右邊,單行文本框中的內(nèi)容會自動滾動到左邊。
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_03_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_04_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_06_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_08_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_redlines_03_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_10_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinetextfields-textfields_single_12_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singleline-redline_06_large_mdpi.png" alt="" />
當(dāng)單行文本框的輸入內(nèi)容很長并需跨越多行的時候,則文本框應(yīng)該以滾動形式容納文本。
在滾動文本框中,一個圖形化的標(biāo)志出現(xiàn)在標(biāo)線的下面。點擊省略號,光標(biāo)返回到字符的開頭。
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinewithscrolling-textfields_single_scroll_03_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-singlelinewithscrolling-textfields_single_scroll_06_large_mdpi.png" alt="" />
浮動內(nèi)嵌標(biāo)簽,當(dāng)用戶在輸入文本時,標(biāo)簽會浮動到輸入內(nèi)容的上方。
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-floatinglabels-textfields_single_14_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-floatinglabels-textfields_single_17_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-floatinglabels-textfields_single_21_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-floatinglabels-redlines_08_large_mdpi.png" alt="" />
當(dāng)光標(biāo)到達(dá)最下緣,多行文本框會自動讓溢出的的文字?jǐn)嚅_并形成新的行,使文本可以換行和垂直滾動。
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-multilinetextfield-textfields_multi_03a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-multilinetextfield-textfields_multi_03b_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-multilinetextfield-textfields_multi_06_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-multilinetextfield-textfields_multi_08_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_redlines_12_large_mdpi.png" alt="" />
全寬文本框適用于更深入的工作。
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_multi_10a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_multi_10b_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_multi_12_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-fullwidthtextfield-textfields_redlines_12_large_mdpi.png" alt="" />
當(dāng)要是當(dāng)?shù)叵拗谱址麜r可在文本框中使用字符計數(shù)器。
計數(shù)器文本:Roboto Regular 12 sp
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_03a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_03b_large_mdpi.png" alt="" />
計數(shù)器文本:Roboto Regular 12 sp
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_06a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_06b_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_08_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_14_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_14b_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-charactercounter-textfields_counter_16_large_mdpi.png" alt="" />
使用自動補全的文本框去呈現(xiàn)即時建議或補全彈出窗口,可讓用戶更準(zhǔn)確,更高效地輸入信息。
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_03a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_03b_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_06_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_08a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_08b_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_10_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_12a_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_12b_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_15_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-autocompletetextfield-textfields_autocomplete_18_large_mdpi.png" alt="" />
應(yīng)用欄可以作為一個文本框。當(dāng)用戶輸入時,文本框下方會顯示已過濾和排序的內(nèi)容。
http://wiki.jikexueyuan.com/project/material-design/images/components.textfields_search_filtering_A_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components.textfields_search_filtering_B_large_mdpi.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/components-textfields-searchfilter-textfields_filter_06_large_mdpi.png" alt="" />
原文:Text fields 翻譯:SamanthaChou 校對:hyaocuk