Uniapp组件 Textarea 字数统计和限制

weixin_422201302025-03-11 19:26

Uniapp Textarea 字数统计和限制

在 Uniapp 中，可以通过监听 textarea 的 input 事件来实现字数统计功能。以下是一个简单的示例，展示如何在 textarea 的右下角显示输入的字符数。

示例代码

首先，在模板中定义一个 textarea 元素，并绑定 input 事件处理函数：

bash 复制代码

<template>
<view class="container">
<textarea
maxlength="200"
placeholder="请填写您的内容"
@input="updateFontNum"
></textarea>
<view class="char-count">{{ fontNum }}/200</view>
</view>
</template>

然后，在 JavaScript 部分定义 updateFontNum 方法来更新字符数：

bash 复制代码

<script>
export default {
data() {
return {
fontNum: 0
};
},
methods: {
updateFontNum(e) {
this.fontNum = e.detail.value.length;
}
}
};
</script>

详细说明

模板部分： textarea 元素设置了 maxlength 属性为 200，表示最多可以输入 200 个字符。绑定了 input 事件，当用户输入时会触发 updateFontNum 方法。使用 {{ fontNum }}/200 显示当前输入的字符数和最大字符数。
JavaScript 部分：在 data 中定义了一个 fontNum 变量，用于存储当前输入的字符数。 updateFontNum 方法通过 e.detail.value.length 获取当前输入的字符数，并更新 fontNum 变量。

参考文档

通过上述方法，可以轻松实现 textarea 字数统计功能，并在输入框的右下角显示当前输入的字符数。此方法适用于各种平台，包括微信小程序、百度小程序等。。