多行输入框组件

textarea 组件是 Uniapp 中用于输入多行文本的核心组件，适合用于长文本的输入场景，如评论、文章编辑、表单中的多行输入等。textarea 支持多种属性配置，包括占位符、自动高度、光标控制等功能，并且兼容多个平台。

1. 什么是 textarea 组件？

textarea 是一个多行文本输入框，用户可以在其中输入或编辑较长的文本内容。它与普通的单行输入框 input 相比，允许用户输入多行内容，并可以通过属性配置实现如自动高度调整、光标位置控制、禁用等功能。

使用场景

• 文章或评论编辑：允许用户输入较长的文本内容。
• 表单：在表单中用于提交多行文本内容，如反馈或留言。
• 聊天或输入区：适用于聊天应用中的输入区，用户可以输入多行内容。

2. textarea 组件的常用属性

textarea 组件提供了多种属性，用于控制文本框的显示和交互行为。下表列出了常用的属性及其说明。

属性名	类型	默认值	说明	平台差异说明
value	String	无	输入框的内容
placeholder	String	无	输入框为空时占位符
placeholder-style	String	无	指定占位符的样式
disabled	Boolean	false	是否禁用输入框
maxlength	Number	140	最大输入长度，设置为 -1 时不限制输入长度
focus	Boolean	false	是否获取焦点	在 H5 平台能否聚焦取决于浏览器实现。nvue 页面不支持。
auto-focus	Boolean	false	是否自动聚焦	京东小程序支持。
auto-height	Boolean	false	是否自动增高，设置 auto-height 时，style.height 不生效
cursor-spacing	Number	0	指定光标与键盘的距离，单位为 px。	App、微信小程序、百度小程序等多个平台支持。
show-confirm-bar	Boolean	true	是否显示键盘上方的 "完成" 按钮	微信小程序等部分平台支持。
@focus	EventHandle	无	输入框聚焦时触发，返回键盘高度等信息。	部分平台支持。
@blur	EventHandle	无	输入框失去焦点时触发，返回输入内容和光标位置。	部分平台支持。
@input	EventHandle	无	输入时触发该事件，返回输入的值和光标位置。	快手小程序不支持。

2.1 占位符 placeholder

• 说明：该属性指定当输入框为空时显示的提示文本。
• 类型：String
• 默认值：无

<template>
  <view>
    <textarea placeholder="请输入您的评论" />
  </view>
</template>

2.2 禁用输入框 disabled

• 说明：该属性用于禁用输入框，禁用时用户不能输入或修改内容。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <textarea placeholder="输入已禁用" :disabled="true" />
  </view>
</template>

2.3 最大输入长度 maxlength

• 说明：该属性限制用户最多可以输入的字符数，设置为 -1 时不限制长度。
• 类型：Number
• 默认值：140

<template>
  <view>
    <textarea placeholder="最多输入 200 字" :maxlength="200" />
  </view>
</template>

2.4 自动高度 auto-height

• 说明：该属性用于设置输入框的高度自动调整，随着输入内容的增加自动增高。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <textarea placeholder="输入内容自动增高" :auto-height="true" />
  </view>
</template>

2.5 获取焦点 focus

• 说明：该属性用于设置输入框在页面加载或特定交互后自动获取焦点。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <textarea placeholder="自动获取焦点" :focus="true" />
  </view>
</template>

2.6 事件处理 @input 和 @blur

• 说明：@input 事件在输入时触发，@blur 事件在输入框失去焦点时触发。
• 类型：EventHandle
• 默认值：无

<template>
  <view>
    <textarea placeholder="请输入内容" @input="handleInput" @blur="handleBlur" />
  </view>
</template>

<script setup>
function handleInput(event) {
  console.log('当前输入值:', event.detail.value);
}

function handleBlur(event) {
  console.log('输入框失去焦点，当前输入值:', event.detail.value);
}
</script>

3. 自动高度和占位符样式

以下案例展示了如何使用 textarea 组件，结合自动高度、占位符样式及事件处理，灵活配置输入框的功能和外观。

<template>
  <view>
    <!-- 自动高度的输入框 -->
    <view class="section">
      <text>自动高度输入框：</text>
      <textarea :auto-height="true" placeholder="输入内容自动增高" @input="handleInput" />
    </view>

    <!-- 自定义占位符样式 -->
    <view class="section">
      <text>自定义占位符样式：</text>
      <textarea placeholder="占位符字体颜色为红色" placeholder-style="color: red;" />
    </view>
  </view>
</template>

<script setup>
function handleInput(event) {
  console.log('输入框内容:', event.detail.value);
}
</script>

<style scoped>
.section {
  margin: 20px 0;
}
</style>