menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
widgets
组件
keyboard_arrow_down
涟漪动画效果按钮浮动操作按钮下拉选择分隔线可扩展面板文本框选择控件滑块列表列表控制网格列表Tab 选项卡工具栏应用栏抽屉式导航底部导航栏卡片纸片工具提示Snackbar表格对话框菜单进度指示器
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布，查看 mdui 2 开发文档。

文本框

文本框一般使用在表单中。MDUI 的文本框拥有字数统计、表单验证等功能。

可以配合 网格布局系统 进行表单布局。

调用方式

在页面加载完后会自动初始化。对于动态生成的文本框，需要调用 mdui.mutation() 进行初始化。

色彩

使用强调色。

相关阅读

Material Design 设计指南：组件 - 文本框

样式

单行文本框

这是一个最简单的文本框的例子：

codeplay_arrow
Example
<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

固定标签

codeplay_arrow
Example
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

浮动标签

codeplay_arrow
Example
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

禁用状态

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

codeplay_arrow
Example
<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- 固定标签 -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- 浮动标签 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

多行文本框

把单行文本框的 input 标签替换为 textarea 标签，即为多行文本框。多行文本框会根据内容的高度自动调整文本框的高度。

codeplay_arrow
Example
<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- 固定标签 -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 浮动标签 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 禁用状态 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

在 textarea 上添加 rows 属性，则文本框的高度将固定不变。

codeplay_arrow
Example
<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

含帮助文本

在 <div class="mdui-textfield"></div> 内部的最后添加元素 <div class="mdui-textfield-helper"></div>，可以添加帮助文本。

codeplay_arrow
Example
<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="邮箱" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

含图标

codeplay_arrow
Example
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- 固定标签 -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- 浮动标签、多行文本框 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 禁用状态 -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

可展开文本框

codeplay_arrow
Example
<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

功能

表单验证

MDUI 使用 HTML5 进行表单验证，在 <div class="mdui-textfield"></div> 内部的最后添加元素 <div class="mdui-textfield-error"></div>，可以添加错误信息。

若同时包含错误信息和帮助文本，需要把帮助文本放在错误信息的后面。

codeplay_arrow
Example
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">用户名不能为空</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">邮箱格式错误</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
  <div class="mdui-textfield-helper">请输入至少 6 位，且包含大小写字母的密码</div>
</div>

除了使用 HTML5 的表单验证外，也可以使用 JavaScript 进行验证。

在验证不通过的文本框上添加类 .mdui-textfield-invalid，验证通过后移除该类即可。

codeplay_arrow
Example
<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">用户名已存在</div>
</div>

字数统计

在 input 元素上添加属性 maxlength="" 即可限制输入的字符长度，MDUI 会自动添加实时字数统计显示到文本框右下角。

codeplay_arrow
Example
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">邮箱格式错误</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

动态生成的文本框

如果你的文本框是动态生成的，则需要调用 mdui.mutation() 进行初始化。

如果你动态修改了文本框内容，则需要调用 mdui.updateTextFields() 方法来重新初始化文本框。该方法可以接受一个含 .mdui-textfield 类的 CSS 选择器、或者 DOM 元素、或者 DOM 元素组成的数组作为参数，表示只重新初始化指定文本框。如果没有传入参数，将重新初始化页面中的所有文本框。

CSS 类名列表

类名效果
.mdui-textfield定义一个文本框。
.mdui-textfield-floating-label定义浮动标签文本框。
.mdui-textfield-label定义文本框的标签。
.mdui-textfield-input定义文本框的输入框。
.mdui-textfield-error定义表单验证的错误信息。
.mdui-textfield-helper定义文本框的帮助文本。
arrow_backPrevious
可扩展面板
arrow_forwardNext
选择控件