textarea
组件类型:UniTextareaElement
多行输入框
textarea 兼容性
Android | iOS | web |
3.9 | 4.11 | 4.0 |
属性
名称 | 类型 | 默认值 | 描述 |
name | string | - | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |
value | string | "" | 输入框的初始内容 |
placeholder | string | "" | 输入框为空时占位符 |
placeholder-style | string | "" | 指定 placeholder 的样式 |
placeholder-class | string(string.ClassString) | "" | 指定 placeholder 的样式类,目前仅支持color,font-size和font-weight |
maxlength | number | "不限制长度" | 最大输入长度,0和正数为合法值,非法值的时候不限制最大长度 |
auto-focus | boolean | false | 自动获取焦点 |
focus | boolean | false | 获取焦点 |
confirm-type | return | send | search | next | go | done | "return" | 设置键盘右下角按钮的文字 |
值名称 | 描述 | return | 换行 | send | 发送 | search | 搜索 | next | 下一个 | go | 前往 | done | 完成 |
|
inputmode | none | text | decimal | numeric | tel | search | email | url | "text" | 在编辑元素或其内容时可能输入的数据类型的提示 |
值名称 | 描述 | none | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 | text | 使用用户本地区域设置的标准文本输入键盘。 | decimal | 小数输入键盘,包含数字和分隔符(通常是“ . ”或者“ , ”),设备可能也可能不显示减号键。 | numeric | 数字输入键盘,所需要的就是 0 到 9 的数字,设备可能也可能不显示减号键。 | tel | 电话输入键盘,包含 0 到 9 的数字、星号(*)和井号(#)键。 | search | 为搜索输入优化的虚拟键盘 | email | 为邮件地址输入优化的虚拟键盘,通常包含""符号和其他优化。 | url | 为网址输入优化的虚拟键盘,比如,“/”键会更加明显、历史记录访问等。 |
|
cursor | number | 0 | 指定focus时的光标位置 |
confirm-hold | boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 |
auto-height | boolean | false | 是否自动增高,设置auto-height时,style.height不生效 |
cursor-spacing | number | 0 | 指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
cursor-color | string(string.ColorString) | "" | 指定光标颜色 |
selection-start | number | -1 | 光标起始位置,自动聚集时有效,需与selection-end搭配使用 |
selection-end | number | -1 | 光标结束位置,自动聚集时有效,需与selection-satrt搭配使用 |
adjust-position | boolean | true | 键盘弹起时,是否自动上推页面 |
hold-keyboard | boolean | false | focus时,点击页面的时候不收起键盘 |
@confirm | (event: UniInputConfirmEvent) => void | - | 点击完成时, 触发 confirm 事件,event.detail = {value: value} |
@input | (event: UniInputEvent) => void | - | 当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上 |
@linechange | (event: UniTextareaLineChangeEvent) => void | - | 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} |
@blur | (event: UniTextareaBlurEvent) => void | - | 输入框失去焦点时触发,event.detail = {value, cursor} |
@keyboardheightchange | (event: UniInputKeyboardHeightChangeEvent) => void | - | 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} |
@focus | (event: UniTextareaFocusEvent) => void | - | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 |
confirm-type 兼容性
| Android | iOS | web |
return | 3.9 | 4.15 | 4.0 |
send | x | 4.15 | 4.0 |
search | x | 4.15 | 4.0 |
next | x | 4.15 | 4.0 |
go | x | 4.15 | 4.0 |
done | x | 4.15 | 4.0 |
| Android | iOS | web |
none | x | x | 4.0 |
text | x | x | 4.0 |
decimal | x | x | 4.0 |
numeric | x | x | 4.0 |
tel | x | x | 4.0 |
search | x | x | 4.0 |
email | x | x | 4.0 |
url | x | x | 4.0 |
事件
名称 | 类型 | 必填 | 默认值 | 描述 |
detail | UniInputConfirmEventDetail | 是 | - | - |
名称 | 类型 | 必备 | 默认值 | 描述 | value | string | 是 | - | 输入框内容 |
|
bubbles | boolean | 是 | - | 是否冒泡 |
cancelable | boolean | 是 | - | 是否可以取消 |
type | string | 是 | - | 事件类型 |
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
名称 | 类型 | 必填 | 默认值 | 描述 |
detail | UniInputEventDetail | 是 | - | - |
名称 | 类型 | 必备 | 默认值 | 描述 | value | string | 是 | - | 输入框内容 | cursor | number | 是 | - | 光标的位置 | keyCode | number | 是 | - | 输入字符的Unicode值 |
|
bubbles | boolean | 是 | - | 是否冒泡 |
cancelable | boolean | 是 | - | 是否可以取消 |
type | string | 是 | - | 事件类型 |
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
UniTextareaLineChangeEvent
UniTextareaLineChangeEvent 的属性值
名称 | 类型 | 必填 | 默认值 | 描述 |
detail | UniTextareaLineChangeEventDetail | 是 | - | - |
名称 | 类型 | 必备 | 默认值 | 描述 | lineCount | number | 是 | - | 行数 | heightRpx | number | 是 | - | textarea的高度 | height | number | 是 | - | textarea的高度 |
|
bubbles | boolean | 是 | - | 是否冒泡 |
cancelable | boolean | 是 | - | 是否可以取消 |
type | string | 是 | - | 事件类型 |
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
timeStamp | number | 是 | - | 事件发生时的时间戳 |
UniTextareaLineChangeEvent 的方法
名称 | 类型 | 必填 | 默认值 | 描述 |
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
UniTextareaBlurEvent
UniTextareaBlurEvent 的属性值
名称 | 类型 | 必填 | 默认值 | 描述 |
detail | UniTextareaBlurEventDetail | 是 | - | - |
名称 | 类型 | 必备 | 默认值 | 描述 | value | string | 是 | - | 输入框内容 | cursor | number | 是 | - | 选择区域的起始位置 |
|
bubbles | boolean | 是 | - | 是否冒泡 |
cancelable | boolean | 是 | - | 是否可以取消 |
type | string | 是 | - | 事件类型 |
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
timeStamp | number | 是 | - | 事件发生时的时间戳 |
UniTextareaBlurEvent 的方法
名称 | 类型 | 必填 | 默认值 | 描述 |
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
名称 | 类型 | 必填 | 默认值 | 描述 |
detail | UniInputKeyboardHeightChangeEventDetail | 是 | - | - |
名称 | 类型 | 必备 | 默认值 | 描述 | height | number | 是 | - | 键盘高度 | duration | number | 是 | - | 持续时间 |
|
bubbles | boolean | 是 | - | 是否冒泡 |
cancelable | boolean | 是 | - | 是否可以取消 |
type | string | 是 | - | 事件类型 |
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
UniTextareaFocusEvent
UniTextareaFocusEvent 的属性值
名称 | 类型 | 必填 | 默认值 | 描述 |
detail | UniTextareaFocusEventDetail | 是 | - | - |
名称 | 类型 | 必备 | 默认值 | 描述 | height | number | 是 | - | 键盘高度 | value | string | 是 | - | 输入框内容 |
|
bubbles | boolean | 是 | - | 是否冒泡 |
cancelable | boolean | 是 | - | 是否可以取消 |
type | string | 是 | - | 事件类型 |
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 |
timeStamp | number | 是 | - | 事件发生时的时间戳 |
UniTextareaFocusEventDetail 兼容性
| Android | iOS | web |
height | 3.9 | 4.11 | x |
UniTextareaFocusEvent 的方法
名称 | 类型 | 必填 | 默认值 | 描述 |
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
textarea 属性兼容性
| Android | iOS | web |
name | 3.9 | 4.11 | 4.0 |
value | 3.9 | 4.11 | 4.0 |
placeholder | 3.9 | 4.11 | 4.0 |
placeholder-style | 3.9 | 4.11 | 4.0 |
placeholder-class | 3.9 | 4.11 | 4.0 |
maxlength | 3.9 | 4.11 | 4.0 |
auto-focus | 3.9 | 4.11 | 4.0 |
focus | 3.9 | 4.11 | 4.0 |
confirm-type | 3.9 | 4.15 | 4.0 |
inputmode | x | x | 4.0 |
cursor | 3.9 | 4.11 | 4.0 |
confirm-hold | 3.9 | 4.11 | 4.0 |
auto-height | 3.9 | 4.11 | 4.0 |
cursor-spacing | 3.9 | 4.11 | x |
cursor-color | 3.99 | 4.11 | - |
selection-start | 3.9 | 4.11 | 4.0 |
selection-end | 3.9 | 4.11 | 4.0 |
adjust-position | 3.9 | 4.11 | x |
hold-keyboard | 4.0 | 4.11 | x |
@confirm | 3.9 | 4.11 | 4.0 |
@input | 3.9 | 4.11 | 4.0 |
@linechange | 3.9 | 4.11 | 4.0 |
@blur | 3.9 | 4.11 | 4.0 |
@keyboardheightchange | 3.9 | 4.11 | x |
@focus | 3.9 | 4.11 | 4.0 |
不可以嵌套组件
示例
hello uni-app x
参见
键盘上推专题
input和textarea组件都一个属性adjust-position
,默认为true,即软键盘弹出时,默认上推页面以显示出输入框,避免输入框被软键盘遮挡。
因为此处内容与input重复,详见input文档
inputmode 兼容性:Chrome >= 66、Edge >= 79、Firefox >= 95、Chrome Android >= 66、Firefox for Android >= 79、Safari on iOS >= 12.2、WebView Android >= 66
Tips
- uni-app x 4.0 起,App-Android平台 textarea 点击输入框外的屏幕会自动收起软键盘。
- uni-app x 4.0 起,App-Android平台 textarea 的 font-size 默认值统一为 16px,line-height 默认值为 1.2em,width 默认值为300px。
- uni-app x 4.15 起,App-iOS平台 textarea 软键盘默认右下角改为 return(换行) ,换行时,键盘不会收起。
- 由于Android系统限制,textarea的键盘右下角按钮只能是
换行
,所以暂时不提供confirm-type
属性。 - 当软键盘右下角为 换行 时,confirm-hold 恒为 true,设置为false也不生效,即按下 换行 时,软键盘不会消失。
- 在Android 9以下的系统版本,样式
line-height
点击键盘换行时行间距设置无效,此问题是Android系统的的bug,后续解决。