# 多行输入
与单行输入相比,多行输入可调整大小,可设置水平可调整、竖直和调整、或全部可调整;用户在输入时可以手动调整输入框的大小以适应输入的内容。

# 概念说明
# 主要属性
组件通用属性请参见组件通用说明。
值:当前多行输入组件,输入框内的本文内容。
清除按钮:是否可清空。开启并在输入框有内容时会显示清空按钮。
占位符:输入框为空时的提示文本。
可输入最大字符数:输入框内可输入的最大字符数,超过时不支持输入。
显示字数统计:开启后,会在组件上显示当前输入字数以及最大字符数,当前输入字数超过最大字符数时,不支持输入。
字数统计位置:显示字数统计开启后,支持选择字数统计位置:输入框内、输入框外。
自动获取焦点:进入页面时,自动选中该输入框。
尺寸:设置多行输入框大小。支持正常,中型,大,巨大,占满五种尺寸。
调整大小:设置多行输入框是否可以调整大小。包括:不可调整,可调整,水平可调整,竖直可调整四种设置。
自适应内容高度:可输入如{maxHeight:100,minHeight:50},单位默认为px,不设置则根据输入内容自适应。
只读:正常显示,但禁止选择或输入。
禁用:置灰显示,且禁止任何交互(焦点、点击、选择、输入等)。
# 组件事件
- 支持基本的鼠标事件:聚焦后和失焦后。
事件名 | 触发条件 |
---|---|
聚焦后 | 多行组件输入框聚焦时触发 |
失焦后 | 多行组件输入框失焦时触发 |
- 支持输入组件常见的事件:输入前,输入时,改变后,清空前,清空后。
事件名 | 触发条件 |
---|---|
输入前 | 多行组件输入框输入前触发 |
输入时 | 多行组件输入框输入后触发 |
改变后 | 多行组件输入框值改变后触发 |
清空前 | 多行组件输入框清空前触发 |
清空后 | 多行组件输入框清空后触发 |
# 样式
样式说明请参见组件通用说明。
# 主题样式
- 宽度
- width:文本框高度,如 1px。默认值240px。
- min-width:文本框最小宽度,如 1px。默认值240px。
- 高度
- height:文本框高度,如 1px。默认值100px。
- min-height:文本框最小高度,如 1px。默认值32px。
- 内边距
- padding:文本框内边距,如 1px。padding包含4个值,按顺序是上边距、右边距、下边距、左边距,数值个数可以是1至4个。1个表示所有边距值都相等,2个表示上下同一个值左右同一个值,3个表示左右同一个值。默认值5px 10px。
- 圆角 border-radius:文本框圆角,如 1px。border-radius包含4个值,按顺序是上圆角、右圆角、下圆角、左圆角,数值个数可以是1至4个。1个表示所有圆角值都相等,2个表示上下同一个值左右同一个值,3个表示左右同一个值。默认值4px。
- 边框颜色
- border-color:文本框边框颜色,如 #223325。默认值#e5e5e5。
- border-color-focus:鼠标聚焦到文本框时边框的颜色值,如 #223325。默认值#4c88FF。
- border-color-disabled:当文本框是禁用状态时的边框颜色值,如 #223325。默认值#e5e5e5。
- 背景颜色
- background:文本框背景色,如 #223325。默认值#fff。
- background-disabled:禁用文本框背景色,如 #223325。默认值#F7F8FA。
- 文字颜色
- color:输入框文字颜色,如 #223325。默认值#333。
- color-disabled:禁用输入框文字颜色,如 #223325。默认值#999。
- placeholder-color:文本框提示内容文字颜色,如 #223325。默认值#ccc。
- 边框阴影
- box-shadow-focus:鼠标聚焦到输入框时边框的阴影效果值,如 2px 2px 2px 1px rgba(0, 0, 0, 0.2)。默认值0 0 0 2px rgba(77, 136, 255, 0.2)。
- box-shadow-focus-color:鼠标聚焦到输入框时边框的阴影颜色,如 #223325。默认值rgba(77, 136, 255, 0.2)