微信小程序textarea组件应用介绍与案例精讲

最新推荐文章于 2025-06-29 09:02:52 发布

前端基地

最新推荐文章于 2025-06-29 09:02:52 发布

阅读量1.4k

点赞数 13

CC 4.0 BY-SA版权

分类专栏： 07微信小程序从入门到精通文章标签：微信小程序小程序 textarea的使用 textarea组件案例 textarea组件微信小程序案例小程序案例

本文链接：https://blog.csdn.net/chinayun_6401/article/details/146205502

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

微信小程序textarea组件应用介绍与案例精讲

textarea的使用

在微信小程序开发中，textarea 组件用于实现多行文本输入功能。它支持丰富的属性和事件，能够满足多种场景下的输入需求。以下是对 textarea 组件的详细介绍及示例代码。

示例代码如下：

textarea.wxml

<view class="w">
  <view class="title">placeholder、placeholder-style、disabled</view>
  <textarea placeholder="请输入" placeholder-style="color:red;font-size:50rpx;font-weight:bold;" disabled></textarea>
  <view class="title">focus、auto-height</view>
  <textarea focus auto-height></textarea>
  <view class="title">value、bindfocus、bindblur</view>
  <textarea value="{
  
  {value}}" bindfocus="bindfocus" bindblur="bindblur"></textarea>
  输入的值是：{
  
  {value}}
</view>

说明：此 wxml 文件构建了一个包含多个 textarea 实例的页面，展示了不同属性的应用效果。第一个 textarea 呈现了占位文本样式及禁用状态；第二个 textarea 实现自动获取焦点和根据内容自动调整高度；第三个 textarea 关联了数据绑定与焦点相关事件，并在页面中实时显示输入的值。

textarea.js

Page({
  data:{
    value:'hello',
  },
  bindfocus(e){
    console.log(e)
  },
  bindblur(e){
    this.setData({
      value:e.detail.value
    })
  }
})

说明：在 js 文件中，定义了一个页面实例。data 中初始化了 textarea 的初始值 value 为 hello 。bindfocus 函数在 textarea 获得焦点时被触发，目前仅将事件对象打印到控制台；bindblur 函数在 textarea 失去焦点时，将输入框的当前值更新到页面数据 value 中，实现数据的双向绑定。

运行结果，截图如下：