textarea

textarea 兼容性

属性

confirm-type 兼容性

UniTextareaLineChangeEvent

UniTextareaBlurEvent

展示全部

# 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"

设置键盘右下角按钮的文字

值名称	描述
return	换行
send	发送
search	搜索
next	下一个
go	前往
done	完成

inputmode

"text"

在编辑元素或其内容时可能输入的数据类型的提示

值名称	描述
none	无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
text	使用用户本地区域设置的标准文本输入键盘。
decimal	小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。
numeric	数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。
tel	电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。
search	为搜索输入优化的虚拟键盘
email	为邮件地址输入优化的虚拟键盘，通常包含""符号和其他优化。
url	为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。

cursor

number

指定focus时的光标位置

confirm-hold

boolean

false

点击键盘右下角按钮时是否保持键盘不收起

auto-height

boolean

false

是否自动增高，设置auto-height时，style.height不生效

cursor-spacing

number

指定光标与键盘的距离，单位 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

# inputmode 兼容性

	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

# 事件

# UniInputConfirmEvent

# UniInputConfirmEvent 的属性值

名称

类型

必填

默认值

描述

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

是

事件发生时的时间戳

# UniInputConfirmEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# UniInputEvent

# UniInputEvent 的属性值

名称

类型

必填

默认值

描述

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

是

事件发生时的时间戳

# UniInputEvent 的方法

名称	类型	必填	默认值	描述
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	是	-	阻止当前事件的默认行为

# UniInputKeyboardHeightChangeEvent

# UniInputKeyboardHeightChangeEvent 的属性值

名称

类型

必填

默认值

描述

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

是

事件发生时的时间戳

# UniInputKeyboardHeightChangeEvent 的方法

名称	类型	必填	默认值	描述
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

Template

Script



<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view class="main">
      <textarea
      :value="default_value"
        class="uni-textarea"
        :auto-focus="true"
        :focus="focus_boolean"
        :confirm-hold="confirm_hold_boolean"
        :auto-height="auto_height_boolean"
        :fixed="fixed_boolean"
        :show-confirm-bar="show_confirm_bar_boolean"
        :adjust-position="adjust_position_boolean"
        :cursor-color="cursor_color"
        :inputmode="inputmode_enum[inputmode_enum_current].name"
        :confirm-type="confirm_type_list[confirm_type_current].name"
        :maxlength="maxlength"
        @click="textarea_click"
        @touchstart="textarea_touchstart"
        @touchmove="textarea_touchmove"
        @touchcancel="textarea_touchcancel"
        @touchend="textarea_touchend"
        @tap="textarea_tap"
        @longpress="textarea_longpress"
        @confirm="textarea_confirm"
        @input="textarea_input"
        @linechange="textarea_linechange"
        @blur="textarea_blur"
        @keyboardheightchange="textarea_keyboardheightchange"
        @focus="textarea_focus"
        style="padding: 10px; border: 1px solid #666"
      />
    </view>
    <view class="content">
      <boolean-data
        :defaultValue="false"
        title="键盘弹起时，是否自动上推页面（仅限非 Web 平台）"
        @change="change_adjust_position_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）"
        @change="change_show_confirm_bar_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）"
        @change="change_fixed_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="是否自动增高，设置auto-height时，style.height不生效"
        @change="change_auto_height_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="点击键盘右下角按钮时是否保持键盘不收起"
        @change="change_confirm_hold_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="focus_boolean"
        title="获取焦点"
        @change="change_focus_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="true"
        title="首次自动获取焦点"
        @change="change_auto_focus_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="改变光标颜色为透明"
        @change="change_cursor_color_boolean"
      ></boolean-data>
      <enum-data
        :items="inputmode_enum"
        title="是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。（仅限 Web 平台符合条件的高版本浏览器或webview）。"
        @change="radio_change_inputmode_enum"
      ></enum-data>
      <enum-data
        :items="confirm_type_list"
        title="枚举属性，可以设置键盘右下角按钮。（仅限 Web、iOS 平台）。"
        @change="radio_change_confirm_type"
      ></enum-data>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
.main {
  min-height: 100px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
}

.main .list-item {
  width: 100%;
  height: 100px;
  border: 1px solid #666;
}
</style>

# 参见

# 键盘上推专题

input和textarea组件都一个属性adjust-position，默认为true，即软键盘弹出时，默认上推页面以显示出输入框，避免输入框被软键盘遮挡。

因为此处内容与input重复，详见input文档

# inputmode说明

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，后续解决。