文本框

文本框一般使用在表單中。MDUI 的文本框擁有字?jǐn)?shù)統(tǒng)計(jì)、表單驗(yàn)證等功能。

可以配合網(wǎng)格布局系統(tǒng)進(jìn)行表單布局。

調(diào)用方式

在頁(yè)面加載完后會(huì)自動(dòng)初始化。對(duì)于動(dòng)態(tài)生成的文本框，需要調(diào)用 mdui.updateTextFields() 進(jìn)行初始化。

色彩

使用強(qiáng)調(diào)色。

相關(guān)閱讀

Material Design 文本框設(shè)計(jì)規(guī)范

樣式

單行文本框

這是一個(gè)最簡(jiǎn)單的文本框的例子：

在線運(yùn)行

固定標(biāo)簽

在線運(yùn)行

浮動(dòng)標(biāo)簽

在線運(yùn)行

禁用狀態(tài)

在 .mdui-textfield-input 元素上添加 disabled 屬性，即可禁用文本框。

在線運(yùn)行

多行文本框

把單行文本框的 input 標(biāo)簽替換為 textarea 標(biāo)簽，即為多行文本框。多行文本框會(huì)根據(jù)內(nèi)容的高度自動(dòng)調(diào)整文本框的高度。

在線運(yùn)行

含圖標(biāo)

在線運(yùn)行

可展開(kāi)文本框

在線運(yùn)行

功能

表單驗(yàn)證

MDUI 使用 HTML5 進(jìn)行表單驗(yàn)證，在 <div class="mdui-textfield"></div> 內(nèi)部的最后添加元素 <div class="mdui-textfield-error"></div>，可以添加錯(cuò)誤信息。

在線運(yùn)行

除了使用 HTML5 的表單驗(yàn)證外，也可以使用 JavaScript 進(jìn)行驗(yàn)證。

在驗(yàn)證不通過(guò)的文本框上添加類(lèi) .mdui-textfield-invalid，驗(yàn)證通過(guò)后移除該類(lèi)即可。

在線運(yùn)行

字?jǐn)?shù)統(tǒng)計(jì)

在 input 元素上添加屬性 maxlength="" 即可限制輸入的字符長(zhǎng)度，MDUI 會(huì)自動(dòng)添加實(shí)時(shí)字?jǐn)?shù)統(tǒng)計(jì)顯示到文本框右下角。

在線運(yùn)行

動(dòng)態(tài)生成的文本框

如果你的文本框是動(dòng)態(tài)生成的，或者動(dòng)態(tài)修改了文本框內(nèi)容，則需要調(diào)用 mdui.updateTextFields() 方法來(lái)重新初始化文本框。

該方法可以接受一個(gè)含 .mdui-textfield 類(lèi)的 CSS 選擇器、或者 DOM 元素、或者 DOM 元素組成的數(shù)組作為參數(shù)，表示只重新初始化指定文本框。如果沒(méi)有傳入?yún)?shù)，將重新初始化頁(yè)面中的所有文本框。

CSS 類(lèi)名列表