文本输入

用来填写一行或一段文字。三种外观共用同一套属性和颜色。

引入

按要使用的外观分别引入。

标签	何时使用
`<md-text-input>`	一行短文字，例如名字、邮箱
`<md-action-input>`	一行文字，并在框内发送
`<md-text-area>`	一段长短不定的文字，例如评论、备注

import 'genv4/text-input/text-input.js';
import 'genv4/text-input/action-input.js';
import 'genv4/text-input/text-area.js';

示例

Link to “示例”

单行输入

Link to “单行输入”

没有文字、也没有占位时，标签单独居中。有占位或有文字时，标签缩到上面。出错时描边和标签变红。

<md-text-input label="Label"></md-text-input>
<md-text-input label="Label" placeholder="Placeholder text"></md-text-input>
<md-text-input label="Label" value="Input text"></md-text-input>
<md-text-input label="Label" value="Input text" error error-text="Error text"></md-text-input>

发送输入

Link to “发送输入”

框和单行输入相同，右侧多一个发送按钮。有文字时点击发送，页面收到 send，detail.value 是当前文字，文字留在框里。

<md-action-input label="Label"></md-action-input>
<md-action-input label="Label" placeholder="Placeholder text"></md-action-input>
<md-action-input label="Label" value="Input text"></md-action-input>
<md-action-input label="Label" value="Input text" error error-text="Error text"></md-action-input>

多行输入

Link to “多行输入”

空框高 96px，标签贴在上沿。写到第三行时长到 112px，再多就在文字区域里滚动。

<md-text-area label="Label"></md-text-area>
<md-text-area label="Label" placeholder="Placeholder text"></md-text-area>
<md-text-area label="Label" value="Input text"></md-text-area>
<md-text-area label="Label" value="Input text" error error-text="Error text"></md-text-area>

API

Link to “API”

三种输入的属性相同，下表适用于 <md-text-input>、<md-action-input>、<md-text-area>。

属性

Link to “属性”

属性	HTML 属性	类型	默认值	说明
`label`	`label`	`string`	`''`	框内的标签。
`value`	`value`	`string`	`''`	当前文字。不反映到属性上，表单重置时可以恢复初始值。
`placeholder`	`placeholder`	`string`	`''`	没有文字时显示的占位内容。
`supportingText`	`supporting-text`	`string`	`''`	框下面的说明。为空时不显示。
`error`	`error`	`boolean`	`false`	显示出错外观。设置了 `errorText` 时，用它替换说明。
`errorText`	`error-text`	`string`	`''`	错误文案。为空时，校验失败后显示浏览器的提示。
`maxLength`	`maxlength`	`number`	`-1`	最多可输入的字符数。`-1` 表示不限制，也不显示字数。
`required`	`required`	`boolean`	`false`	必填。标签后不加星号。
`readOnly`	`readonly`	`boolean`	`false`	只读。外观不变，不能改字。聚焦时不出现清除。
`autocomplete`	`autocomplete`	`string`	`''`	原样交给内部输入框，由浏览器决定是否填入本机保存的资料。
`name`	`name`	`string`	`undefined`	The HTML name to use in form submission.
`disabled`	`disabled`	`boolean`	`undefined`	Whether or not the element is disabled.
`form`		`HTMLFormElement`	`undefined`	The associated form element with which this element's value will submit.
`labels`		`NodeList`	`undefined`	The labels this element is associated with.
`validity`		`ValidityState`	`undefined`	Returns a ValidityState object that represents the validity states of the element. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
`validationMessage`		`string`	`undefined`	Returns a validation error message or an empty string if the element is valid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage
`willValidate`		`boolean`	`undefined`	Returns whether an element will successfully validate based on forms validation rules and constraints. Disabled and readonly elements will not validate. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate

Methods

Link to “Methods”

Method	Parameters	Returns	Description
`formResetCallback`	None	`void`
`formStateRestoreCallback`	`state`	`void`
`checkValidity`	None	`boolean`	Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch an `invalid` event. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity
`reportValidity`	None	`boolean`	Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch a cancelable `invalid` event. If not canceled, a the current `validationMessage` will be reported to the user. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity
`setCustomValidity`	`error`	`void`	Sets the element's constraint validation error message. When set to a non-empty string, `validity.customError` will be true and `validationMessage` will display the provided error. Use this method to customize error messages reported. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity

事件

Link to “事件”

Event	Type	Bubbles	Composed	Description
`input`	`InputEvent`	Yes	Yes	文字变化时触发。
`change`	`Event`	Yes	No	文字提交时触发。
`send`	`CustomEvent<{value: string}>`	Yes	Yes	仅 `<md-action-input>`。有文字时点击发送，detail.value 是当前文字，文字留在框里。

主题

Link to “主题”

用组件 CSS 变量覆盖。下面只列出 Sass 里标记为支持的变量。

示例

Link to “示例”

<style>
  .text-input-theme {
    --md-text-input-container-shape: 4px;
    --md-text-input-container-color: #e5f4f3;
    --md-text-input-label-text-color: #006a6a;
    --md-text-input-active-outline-color: #006a6a;
  }
</style>

<md-text-input class="text-input-theme" label="Label" value="Input text"></md-text-input>

文本输入 `<md-text-input>`

Link to “文本输入 <md-text-input>”

变量	默认值
`--md-text-input-active-outline-color`	`--md-sys-color-primary`
`--md-text-input-caret-color`	`--md-sys-color-primary`
`--md-text-input-clear-icon-color`	`--md-sys-color-on-surface-variant`
`--md-text-input-container-color`	`--md-sys-color-surface-bright`
`--md-text-input-container-height`	`56px`
`--md-text-input-container-shape`	`--md-sys-shape-corner-medium`
`--md-text-input-disabled-content-color`	`rgba(0, 0, 0, 0.38)`
`--md-text-input-disabled-layer-color`	`rgba(0, 0, 0, 0.12)`
`--md-text-input-error-caret-color`	`--md-sys-color-error`
`--md-text-input-error-hover-layer-color`	`color-mix(in srgb, var(--md-sys-color-error-container, #ffb4ab) 12%, transparent)`
`--md-text-input-error-icon-size`	`16px`
`--md-text-input-error-label-color`	`--md-sys-color-error`
`--md-text-input-error-outline-color`	`--md-sys-color-error`
`--md-text-input-error-pressed-layer-color`	`color-mix(in srgb, var(--md-sys-color-error-container, #ffb4ab) 18%, transparent)`
`--md-text-input-error-supporting-text-color`	`--md-sys-color-error`
`--md-text-input-hover-layer-color`	`color-mix(in srgb, var(--md-sys-color-primary-container, #d0bcff) 12%, transparent)`
`--md-text-input-input-text-color`	`--md-sys-color-on-surface`
`--md-text-input-input-text-font`	`--md-sys-typescale-body-large-font`
`--md-text-input-input-text-line-height`	`--md-sys-typescale-body-large-line-height`
`--md-text-input-input-text-size`	`--md-sys-typescale-body-large-size`
`--md-text-input-input-text-weight`	`--md-sys-typescale-body-large-weight`
`--md-text-input-label-text-color`	`--md-sys-color-primary`
`--md-text-input-label-text-font`	`--md-sys-typescale-body-small-font`
`--md-text-input-label-text-line-height`	`--md-sys-typescale-body-small-line-height`
`--md-text-input-label-text-size`	`--md-sys-typescale-body-small-size`
`--md-text-input-label-text-weight`	`--md-sys-typescale-body-small-weight`
`--md-text-input-outline-color`	`--md-sys-color-outline-variant`
`--md-text-input-placeholder-color`	`--md-sys-color-on-surface-variant`
`--md-text-input-pressed-layer-color`	`color-mix(in srgb, var(--md-sys-color-primary-container, #d0bcff) 18%, transparent)`
`--md-text-input-supporting-text-color`	`--md-sys-color-on-surface-variant`
`--md-text-input-supporting-text-font`	`--md-sys-typescale-body-small-font`
`--md-text-input-supporting-text-line-height`	`--md-sys-typescale-body-small-line-height`
`--md-text-input-supporting-text-size`	`--md-sys-typescale-body-small-size`
`--md-text-input-supporting-text-weight`	`--md-sys-typescale-body-small-weight`

文本输入 Text Input

Theme Controls