微信小程序-textarea字数统计与限制

第一步:参考官方文档《textarea小程序》

textarea多行输入框。该组件是原生组件,使用时请注意相关限制。

用到的属性:

属性说明
maxlength最大输入长度,设置为 -1 的时候不限制最大长度
minlength最小输入长度
bindinput当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode},keyCode 为键值,目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上

效果:

描述限制最小输入10个字,最多输入200个字

第二步:实现

思路:

  • bindinput="getValueLength"对textarea进行数据绑定;
  • 在getValueLength方法中let value = e.detail.value来获取textarea的值;
  • 用let len = parseInt(value.length)获取textarea的长度
  • 进行最大最小数字判断

1).wxml页面:

<view class="contant"><view class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</view><textarea name="bindTextAreaBlur" bindblur="getText" bindinput="getValueLength" show-confirm-bar='true' value="{{editText}}" bindconfirm="getText"  maxlength="{{max}}" minlength="{{min}}"auto-focus>   <text class="minWord">{{minWord}}</text></textarea>
</view>
<view class="tips">不能填写QQ、微信、电弧等联系方式,否则后台会把此信息删除。</view>

2).js页面:

data: {max: 200, //限制最大输入字符数min: 10,  //限制最小输入字符数minWord: ''//提示语句
},/****限制字数与计算 */getValueLength: function (e) {let value = e.detail.valuelet len = parseInt(value.length)//最少字数限制if (len <= this.data.min)this.setData({minWord: "至少填写10个字哦~"})else if (len > this.data.min)this.setData({minWord: " "})//最多字数限制if (len > 200) return;this.setData({currentWordNumber: len //当前字数 })},

3).wxss页面:

/* pages/release/editText.wxss */page {background-color: rgb(247, 247, 247);
}.contant {border-top: 1px solid rgb(247, 247, 247);width: 100%;margin: 0 auto;background-color: #ffff;
}textarea {min-height: 500rpx;max-height: 500rpx;padding: 10rpx 10rpx;font-size: 16px;width: 94%;margin-left: 3%;margin-top: 15px;
}.tips {width: 96%;margin-left: 2%;height: 45px;color: rgba(136, 136, 136, 1);font-size: 14px;margin-top: 15px;text-align: left;font-family: PingFangSC-regular;
}.minWord {color: red;font-size: 14px;position: absolute;top: 30px;
}.currentWordNumber {height: 35px;line-height: 35我是谁px;font-size: 14px;float: right;margin-right: 15px;color: rgba(136, 136, 136, 1);margin-bottom: 10px;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/3323.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

写代码调 Bug,OpenAI 发布最强 AI 对话系统 ChatGPT!

整理 | 苏宓 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; GPT-3 发布的两年后&#xff0c;我们没等来它的亲弟弟 GPT-4&#xff0c;而是在今天亲眼见证了 OpenAI 带来了一种全新的 AI 聊天机器人——ChatGPT&#xff0c;也可以称之为是 GPT-3 家族里面的亲戚&a…

AI无法打败AI!ChatGPT检测器频繁冤枉无辜学生,竟有210万教师在用

【导读】被AI冤枉的你&#xff0c;还好吗&#xff1f; 当你被AI无辜扣上「作弊」的帽子&#xff0c;作何感想&#xff1f; 这件事恰恰发生在了一位高三学生Lucy Goetz身上。原本她写的一篇社会主义原创论文得了最高分。 但是&#xff0c;Turnitin公司的AI写作检测器竟说&…

如何在本地电脑上搭建AI人工智能绘画工具Stable Diffusion

目录 概述 操作环境 操作步骤 步骤一&#xff1a;安装Python。 步骤二&#xff1a;安装Git。 步骤三&#xff1a;使用git安装stable-diffusion-webui。 步骤四&#xff1a;下载面部重建插件GFPGAN。 步骤五&#xff1a;配置并运行webui-user.bat文件来自动安装所需文件。 步骤五…

AI能否识别出AI生成的内容?AI(ChatGPT)自己怎么说

关注了几天ChatGPT、New Bing等&#xff0c;我意识到将来我们所看的内容&#xff0c;必然有越来越高的比例都是AI生成的&#xff0c;而我们几乎无力分辨&#xff0c;但我有时候还是想分辨的&#xff0c;于是&#xff0c;我对如题的问题就特别好奇。 PS&#xff1a;已经有专注于…

让AI生成AI绘画提示词,OpenAI最新成果ChatGPT被网友玩坏了!还会写代码修bug作诗...

羿阁 发自 凹非寺量子位 | 公众号 QbitAI 一款新的聊天AI被网友们玩疯了。 能直接生成代码、会自动修复bug、在线问诊、模仿莎士比亚风格写作……各种话题都能hold住&#xff0c;它就是OpenAI刚刚推出的——ChatGPT。 有脑洞大开的网友甚至用它来设计游戏&#xff1a;先用ChatG…

关于AI和ChatGPT的使用,AI编程(AIGC),AI绘画(2)

AI绘画技术是指利用人工智能技术来创作、生成或修改图像、照片、插图、漫画等艺术品以及各种视觉效果。常见的AI绘画技术包括机器学习、深度学习和计算机视觉等领域的技术&#xff0c;通过训练神经网络模型来实现自动化地生成图像&#xff0c;其应用范围相当广泛&#xff0c;包…

ChatGPT到底有多厉害?看完你就知道了

hatGPT发布五天&#xff0c;有超过100万玩家&#xff0c;这是 Facebook花10个月才达到的里程碑&#xff0c;三个月1亿用户&#xff0c;这是Twitter花9个月创下的记录。 ChatGPT可以跟人做多轮聊天&#xff0c;能理解人&#xff0c;很可能通过图灵测试&#xff0c;他跟能创造新内…

OpenAI 最强对话模型 ChatGPT: 用户已破百万,落地将有几何

上周三&#xff0c;OpenAI 发布了对话语言模型 ChatGPT&#xff0c;并开放了免费试用。据 OpenAI 的 CEO Sam Altman 称&#xff0c;在短短 5 天的时间里&#xff0c;ChatGPT 就有了 100 万用户&#xff0c;而之前的 GPT-3 花了将近 24 个月才达到这个用户量。 在 OpenAI 给出的…

了解ChatGPT

输出结果与标注正确结果差距反哺调整参数&#xff1a; 无监督预训练和有监督微调 打磨模型的论文&#xff1a;https://arxiv.org/pdf/2203.02155.pdf 核心训练过程&#xff1a;

CHATGPT爆火,通用人工智能的奇点来临

自ChatGPT推出以来&#xff0c;不断地引爆热点&#xff0c;人们对自然语言处理&#xff08;Natural Language Processing, NLP&#xff09;大模型的魔力感到赞叹&#xff0c;还有人探讨通用人工智能&#xff08;Artificial general intelligence&#xff0c;AGI&#xff09;的奇…

当ChatGPT遇见Python

在如火如荼的 ChatGPT 大潮当中&#xff0c;已经衍生出了各种各样的周边产品。 Python 作为著名的万金油工具&#xff0c;怎么能没有它的身影呢。今天我们就介绍两种通过 Python 调用 ChatGPT 的方法&#xff0c;一起来看看吧~ chatgpt-wrapper 这是一个开源在 GitHub 上的项目…

ChatGPT科研绘图(基于python)【chatgpt使用指南-python绘图】

&#x1f951; Welcome to Aedream同学 s blog! &#x1f951; 文章目录 背景chatgpt操作结果 chatgpt可以通过编写Python、matlab等代码实现绘图功能。经过试验&#xff0c;其中以Python最为高效准确&#xff0c;基本不会出现报错。本文以Python绘图为例进行辅助绘图&#xff…

【ChatGPT】全网首发第一本全面介绍 ChatGPT 的书:《 ChatGPT 和人工智能革命 》/ 作者:禅与计算机程序设计艺术 ChatGPT

This Image was drawn By Stable Diffusion 【ChatGPT】《 ChatGPT 和人工智能革命 》/ 作者:禅与计算机程序设计艺术&ChatGPT 目录

【关于ChatGPT的30个问题】11、ChatGPT是否会替代人类客服?/ By 禅与计算机程序设计艺术

11、ChatGPT是否会替代人类客服? 目录 11、ChatGPT是否会替代人类客服? ChatGPT是否会替代人类客服?

【关于ChatGPT的30个问题】12、ChatGPT的训练数据集是什么?/ By 禅与计算机程序设计艺术

12、ChatGPT的训练数据集是什么? 目录 12、ChatGPT的训练数据集是什么? ChatGPT的训练数据集是什么?

非常全面:72页ChatGPT研究框架(2023)ppt(附下载)

本文来源&#xff1a;国泰君安证券、图灵人工智能 国泰君安证券对于ChatGPT进行深入研究&#xff0c;从其市场概况、技术路径、行业进程、商业化四个方面逐一展开说明。 &#xff08;本文共72页&#xff09; 文末提供下载。 全文获取方法&#xff1a; 关注下面的公众号&#xf…

【关于ChatGPT的30个问题】13、ChatGPT是否收到了任何官方的打击?/ By 禅与计算机程序设计艺术

13、ChatGPT是否收到了任何官方的打击? 目录 13、ChatGPT是否收到了任何官方的打击?

ChatGPT、乔姆斯基、图灵、平克与语言的未来

来源&#xff1a;geekculture 翻译&#xff1a;DeepL 作者&#xff1a;Erman Akdogan&#xff0c;技术教授&#xff0c;居住于芝加哥。 发表于极客文化 诺姆-乔姆斯基会如何看待 ChatGPT&#xff1f; 我一直对乔姆斯基关于语言性质的观点以及它在过去引发的辩论很着迷。基于他对…

在一篇由 GPT-3 生成的论文中,ChatGPT 重现了图灵测试的原始论文

来源&#xff1a;AI科技评论 本文约8100字&#xff0c;建议阅读15分钟 ChatGPT 的论文写作能力高过图灵&#xff0c;还骗过了 AI 写作评分工具。 以 ChatGPT 为代表的文本生成的兴起&#xff0c;正促使许多研究人员寻求一个比原始版本更具挑战性的图灵测试。 图灵测试解决两个问…

什么是深度学习?从图灵测试谈到ChatGPT(文末送书)

图灵测试&#xff1a;机器有智能吗&#xff1f; 机器有智能吗&#xff1f; 英国数学家艾伦图灵(Alan Turing)在1950年发问&#xff0c;并提出图灵测试&#xff0c;目的是判断一台机器是否具有人类水平的智能。 图灵测试的基本思路是&#xff1a;一个人与一台机器在隔开的房间里…