微信小程序-textarea组件字数实时更新

一、前言

本文实现的是在小程序中,textarea文本框输入文字后,实时显示文字的字数,获取更好的用户输入体验以及提示。

下图是实现的效果

二、代码实现

2-1、wxml代码

xml 复制代码
<view style="padding: 30rpx;">
    <view style="font-size: 30rpx; font-weight: 500;">实时字数textArea</view>
    <view class="text-area-box">
        <view class="text-area-len">{{textAreaValue.length}}/{{textAreaMaxLen}}</view>
        <textarea style="height: 100%; width: 100%;" maxlength="{{textAreaMaxLen}}" value="{{textAreaValue}}" bindinput="getInputValue" />
    </view>
</view>

2-2、wxss 代码

css 复制代码
.text-area-box {
  position: relative;
  width: 90vw;
  height: 350rpx;
  margin-top: 20rpx;
  background-color: #f1f1f1;
  padding: 14rpx;
  border-radius: 20rpx;
}
.text-area-len {
  width: 150rpx;
  height: 50rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
  background-color: #dbe3f7;
  color: #1552ff;
  position: absolute;
  right: 0rpx;
  top: -60rpx;
  text-align: center;
  line-height: 50rpx;
}

2-3、js代码

javascript 复制代码
Page({
  /**
   * 页面的初始数据
   */
  data: {
    textAreaMaxLen: 500,
    textAreaValue: "",
  },
  getInputValue(res) {
    const value = res.detail.value;
    this.setData({ textAreaValue: value });
  },
});

三、结语

最后来一下常规结语:

实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)

以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。

💥最后!!!不管这篇文章对你有没有用,既然都看到最后了。

👍赞一个!!!

🤩当然,顺带收藏就最好了。

😎欢迎转载,原创不易,转载请注明出处✍️。

😊如果你对小程序开发有兴趣或者正在学习小程序开发,可以关注我。每一篇都是原创,每一篇都是干货噢~。


版权声明:本文为CSDN博主「super--Yang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_44702572/article/details/135129782

相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220693 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧