小程序input与textarea字符计算坑

最新推荐文章于 2024-08-06 11:58:02 发布
原创 最新推荐文章于 2024-08-06 11:58:02 发布 · 737 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

微信小程序的input组件与textarea组件的maxLength参数按字节限制，导致Emoji表情输入异常。因Emoji占用字节不固定，javascript解析时可能将其视为多个字符，影响字符计数与截取。

微信小程序的input组件与textarea组件有一个参数是maxLength，用来限制输入字数的长度，但是有个坑：小程序的字符长度是按照字节数限制的，而不是字符数限制的，那么就造成Emoji的输入长度有问题。

由于javascript使用但是usc-2的编码，对于2个字节字符的Unicode，js是解析起来66的。但是会有以下问题

  1. 不常用字符，比如"𠮷"或者某些emoji表情(或者组合表情👩+🦱=👩‍🦱)占用3个或更多字节。
  2. javascript会将一个多字节字符识别成多个字符😱（看上面代码的最后一句str.length等于7）。
  3. 在某些场景下如果字符截取不完整会直接抛出异常😳😮😯😦😧😨😰😱😇
微信小程序uni-app：常用Form表单组件input、textarea、picker使用示例
彭世瑜的博客
12-07 1386
【代码】微信小程序uni-app：常用Form表单组件使用示例。
【微信小程序】10分钟学会微信小程序textarea多行输入框组件，你还在等什么？
java专栏
11-27 1442
通过以上详细的介绍，相信你已经对微信小程序中的textarea多行输入框组件有了全面的了解。textarea组件虽然看似简单，但功能强大，能够帮助开发者实现丰富的输入功能和良好的用户体验。只要你掌握了这些基础知识和技巧，就能轻松应对各种开发任务。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。
小程序textarea字数限制与输入计算
weixin_42400404的博客
05-18 581
textarea输入框数字的限制 html: <textarea name="info" bindinput='input' class='txt' maxlength="200"> <text class="noteNamuber">{{number|0}}/{{notenumber}}个字</text> </textarea> css: .noteNamuber{ font-size: 28rpx; color: gray;
前端页面 数据处理input、textarea输入框实时 统计字数（真实字数）
阿……莫西林杀菌室
04-19 4957
需求：实时监听textarea/input的输入变化，并在页面上显示还能够输入多少字符。 初始做法（有问题，不准确）： 仅仅使用on keyup事件 ：导致在输入的时候会根据输入法状态把汉字拼音算进去，在换成汉字时并不改变统计结果 如下图： 改过的方法 使用多个事件绑定（可行）： //实时监听字数变化 $(document).ready(function(){ $('.i...
关于微信小程序textarea组件 输入字数 ＞ 限制字数 的bug
一个希望世界和平的前端程序猿的博客
12-26 2515
当你需要给textarea组件添加一个统计输入字数的功能时，如果在手机上通过复制粘贴达到最大限制字数，这时候继续使用手机上的小键盘输入内容，就会出现输入字数大于限制字数的bug，而多出来的字数就是你小键盘上当前输入的内容长度。
html input 数值计算,JS操作input标签内数值计算
weixin_39850331的博客
06-29 669
这次给大家带来，的注意事项有哪些，下面就是实战案例，一起来看一下。window.onload=function(){var oIput1=document.getElementById('put1');var oIput2=document.getElementById('put2');var nAdd=document.getElementById('add');var nSub=documen...
解决emoji表情插入数据库报错问题
echo9310的博客
02-28 2080
在富文本中添加emoji表情，再存入数据数据时，会报sql异常。 org.springframework.jdbc.UncategorizedSQLException: ### Error updating database. Cause: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x8C\xB9\xF0\x9F......
微信小程序 textarea 组件详解及简单实例
08-31
微信小程序的`textarea`组件是用于创建多行文本输入框的元素，用户可以在其中输入多行文字。在设计用户交互界面时，`textarea`组件通常用于收集用户的大段文字反馈或者评论。以下是对`textarea`组件的详细说明及其...
在 Input 和 Textarea 光标处添加字符串
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-06 1746
例如，在聊天应用中，我们可能会在用户键入 “@” 符号时触发自动完成建议，这时候需要确保插入的文本不会破坏现有的输入流。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。为了在光标位置插入文本，我们需要获取光标的位置，然后根据该位置分割原始文本，插入新文本，最后重新拼接文本。对于富文本编辑器来说，插入格式化的文本时，我们可能需要考虑如何保持光标位置不变，或者如何处理嵌套的标签。在文本输入框中，插入点指的是用户光标所在的位置。专栏系列（点击解锁）
【uni-app】 textarea组件的auto-hieght属性,显隐切换时高度异常，无法自适应内容撑开。
qq_59562332的博客
05-28 2534
组件高度自适应bug修复方案。
微信小程序实现简单input正则表达式验证功能示例
11-27
本文实例讲述了微信小程序实现简单input正则表达式验证功能。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果：{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e){ var regLowerCase=new RegExp('[a-z]','g');//判断用户输入的是否为小写字母 var re
微信小程序 计算input框输入的长度
热门推荐
onion_line的博客
08-21 1万+
如图 wxml 和 wxss只是布局 看js逻辑 &lt;view class='input'&gt; &lt;text class='input-left'&gt;标题&lt;/text&gt; &lt;input name='' value='' placeholder='请输入' bindinput='length'&gt;&lt;/input&gt; &lt;text...
解决微信小程序中textarea控件数据长度受限问题
qq_58294345的博客
03-09 1465
正常设置属性只能存入140左右字数。加入以下属性将解除数据长度限制。
解决uniapp微信小程序，input框设置了maxlength时，ios在输入时拼音达到了最大长度导致无法继续输入问题
qq_75069372的博客
01-22 2034
解决uniapp微信小程序，input框设置了maxlength时，ios在输入时拼音达到了最大长度导致无法继续输入问题
emoji表情导致输入框maxlength失效
CherryCola_zjl的博客
07-08 2515
emoji在ios占两位字符长度，但是maxlength里系统认为是一位字符长度，导致文本长度输入会溢出。 这时除去要在input或者textarea 加上maxlength属性，还要监听输入事件，超出长度就截取字符串 catchu(){ if(this.des.length>200){ this.des = this.des.substring(0,200) } } ...
前端学习（205）:animation动画库
歌谣的博客
12-24 571
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
H5&小程序中实现emoji表情
09-09 8222
emoji表情都非常熟悉了，比如微信的会话窗口可以发表情。 但是仔细看有一个重要的发现，比如朋友给你发一个emoji表情，在聊天会话列表页查看最近消息，会发现有点不同，体现在如下： 列表页看到的就是一个表情，比如大笑????的表情。 列表页看到的是一个文字，比如[发呆]，[懵逼] 前者就是默认emoji表情了，后者则是自定义表情。显然你拿着微信的[懵逼]在微博上是显示不出微信的[懵逼]表情的...
微信小程序或者前端，输入键盘自带的emoji表情的编码解码
weixin_34417814的博客
01-03 4890
表情符的编码解码 我之前在做微信小程序的时候遇到了一个问题，一些让用户输入的地方，还有用户的微信昵称都有可能输入键盘自带的emoji表情符，在服务端接收的时候会有异常，在前端进行MD5加密后的签名和后端接收到数据后再进行MD5后的签名不一样。 网上有给出一些解决方法，比如加载表情符图片，修改数据库的字符编码等，这些方法都不太好，也...
原生小程序的textarea标签
最新发布
10-28
同层渲染：在支持同层渲染的小程序中（如微信小程序），textarea组件可以通过同层渲染技术，使其能够更好地与页面其他元素交互，并且可以使用z-index等样式（引用[2]）。 4. 原生组件：textarea在部分小程序平台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值