【快速文档】textarea标签，在小程序中使用多行输入

最新推荐文章于 2025-03-12 15:00:46 发布

原创最新推荐文章于 2025-03-12 15:00:46 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序快速文档专栏收录该内容

29 篇文章

订阅专栏

本文介绍了在小程序中使用textarea标签进行多行输入的方法，包括重要参数如value、placeholder、maxlength等，特别强调了auto-height属性和bindlinechange换行事件的用法。此外，还分享了如何创建一个提示用户剩余输入字数的功能，以帮助用户更好地了解输入限制。

介绍

之前我们提到了小程序中的单行输入框，input标签，这是一个非常重要的输入框标签

我还不会，学习如何在小程序中使用单行输入框input

虽然，input一次是可以输入很多了，但是，单行的缺点就是不能够换行使用，没办法开开心心的跳到下一行继续输入。

这怎么行呢？比如说我要写一个简介或者描述，总不能一行写1000字吧！所以，我们要使用多行输入框，textarea

重要参数

value 输入框中的内容

placeholder 输入框中的提示内容

placeholder-class 为placeholder添加一个class属性

maxlength 最大输入限制，默认140，如果填写-1，则为无限制

auto-height 自动增高，注意，该属性会导致样式中的height属性失效

fixed 如果本身在fixed中，那么就要添加fixed属性

confirm-type 设置键盘的确认按钮

bindfocus 获取焦点事件

bindblur 失去焦点事件

bindlinechange 换行事件

bindinput 输入事件

bindconfirm 确认事件

1，关于bindinput，bindfocus，bindblue和bindconfirm的事件，之前在input标签的时候已经详细介绍过了，再次不做重复。不过注意的是，textarea的bindinput事件之中不可以通过return的返回值，来修改用户输入的内容。

2，关于confirm-type的使用，我已经单独整理出来了。

如果你还不会用，那么点击这里查看如何使用confirm-type

3，虽然一般在使用input标签的时候，可以不考虑设置maxlength，但是在使用textarea的时候，一定要记得这个属性可能需要设置。因为，多行输入框一般都会接受很多内容，往往会超出140字。如果你没有设置该属性，那么可能，用户没办法很好的表达自己全部想要说的内容。

bindlinechange换行事件

触发换行事件的时机为，每次行数发生了变化，都会触发该事件。

首先，你按一下换行键，肯定会触发一次该事件，其次，如果你输入的内容太多了，自动换到了下一行，那么也会触发换行键。当然不仅仅只有增加会触发，如果你删除了很多内容，现在行数减少了，也会触发该事件。

注意：该事件中没有e.detail.value，通过e.detail.lineCount可以得知，现在有几行了。另外，一行可以有多少字，取决于你一行有多宽和一个字有多大，因此，是和样式有关的，并非固定值。

简单使用

由于多行输入和单行输入input大体上是一样的，因此，我们只在这里介绍一下auto-height的自动增高和bindlinechange的换行事件。

wxml代码如下

<textarea bindlinechange="change_line" maxlength="-1" placeholder="这是一个多行输入的标签" auto-height></textarea>
<view>现在总共有：{{ msg }}行了</view>

js代码如下

Page({
  data: {
    msg: ""
  },
  onLoad: function (options) {
    
  },
  change_line(e){
    this.setData({msg: e.detail.lineCount});
  }
})

这里，我们使用到了auto-height的自动增高，那么自动增高到底起到了一个什么作用呢？很简单，我们的多行标签一般是有固定高度的，当然你自己也可以设置固定高度。那么，如果你的内容太多，超出了你设置的默认高度，就会变成滚动条。如果改为自动增高，那么就不会变成滚动条，它会一直变高，往下显示。

但是实际上，一般很少会这么做。对于一个具有审美的前端来说，允许用户改变输入框的样式，是很难接受的。“我特么辛辛苦苦做的样式，现在你就给我搞得一塌糊涂了？”

进阶使用

为了能够再次强调，多行输入标签是有默认的最大输入限制的，于是我决定做一个小案例，创建一个用户还可以输入多少字的提示。

wxml代码如下

<textarea maxlength="100" placeholder="这是一个多行输入的标签" bindinput="text_input"></textarea>
<view>您还可以输入：{{ msg }}字</view>

js代码如下

Page({
  data: {
    msg: ""
  },
  onLoad: function (options) {
    
  },
  text_input(e){
    const max_length = 100;
    const d = e.detail.value;
    num = max_length - d.length;
    this.setData({msg: num});
  }
})

当然，从一开始就提示用户可以输入多少字，这种行为有点不太聪明。因此我们也可以将其修改为剩余多少字的情况下，再进行提示。只需要额外在我们的代码中加一个if判断就可以。这很容易，不是吗？

我是吴茗，如果你看完了觉得有收获的话，请关注我哦！你们的支持对于我来说真的非常重要！

回到小程序快速文档-吴茗