# textarea

多行输入框。

# 使用示例

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-title">textarea 多行输入框</view>
    <demo-cell title="输入区域高度自适应，不会出现滚动条" cellBgColor="#f7f7f7">
			<textarea auto-height placeholder="多行输入框"/>
    </demo-cell>
    <demo-cell title="占位符字体是红色的textarea" cellBgColor="#f7f7f7">
      <textarea placeholder-style="color:#F76260" placeholder="占位符字体是自定义样式"/>
    </demo-cell>
    <demo-cell title="最大输入长度" subTitle="maxlength 默认140； -1 不限制" cellBgColor="#f7f7f7">
      <textarea placeholder="不限制最大长度" :maxlength="-1" />
    </demo-cell>
  </view>
</template>

<script>
	export default {
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

展开刷新关闭

# 属性说明

属性名	类型	默认值	说明
value	String		输入框的内容（v-model）
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	textarea-placeholder	指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
focus	Boolean	false	获取焦点
auto-height	Boolean	false	是否自动增高，设置auto-height时，style.height不生效
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
cursor	Number		指定focus时的光标位置
confirm-type	String	done	设置键盘右下角按钮的文字
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起
selection-start	Number	-1	光标起始位置，自动聚焦时有效，需与selection-end搭配使用
selection-end	Number	-1	光标结束位置，自动聚焦时有效，需与selection-start搭配使用
auto-blur	boolean	false	键盘收起时，是否自动失去焦点
ignoreCompositionEvent	boolean	true	是否忽略组件内对文本合成系统事件的处理。为 `false` 时将触发 `compositionstart、compositionend、compositionupdate` 事件，且在文本合成期间会触发 `input` 事件
@focus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
@blur	EventHandle		输入框失去焦点时触发，event.detail = {value, cursor}
@linechange	EventHandle		输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
@input	EventHandle		当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上
@keyboardheightchange	Eventhandle		键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}

confirm-type 有效值

值	说明
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

Tips

v-model 为 vue 双向绑定的语法规范
textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 @submit。
如需禁止点击其他位置收起键盘的默认行为，可以监听touch事件并使用prevent修饰符
js中给textarea组件赋值为字符串，在字符串中加\n可实现换行

← switch slider →