【Axure教程】动态统计字数

动态统计字数通常用于文本编辑、编程、社交媒体、写作工具、SEO优化、表单与调查以及数据分析等场景,帮助用户实时跟踪文字量,保证内容符合特定的格式或要求,提高工作效率和质量。

今天我们就来学习,怎么在Axure中制作能根据输入内容动态显示已输入字数的原型模版,具体效果如下:

一、效果展示

输入框输入内容后,可以自动统计总字数、中文字数、英文字数、数字字数、其他字符字数

【原型预览含下载地址】

https://axhub.im/ax9/52b3686ede0116c2/#g=1\&p=多行输入框_统计字数

二、制作教程

1、材料准备

材料主要包括输入框和文本标签,如下图所示摆放:

2、交互制作

总字数我们用length函数,就可以获取到输入框里的总字数,所以我们可以在输入框文本改变时,用设置文本的交互,将输入框的length值设置到总字数对应回显的文本里

英文字数我们需要一个文本标签作为辅助,默认隐藏,只用作逻辑处理,在输入框文本改变时,我们将输入框的值设置到辅助文本里,然后通过slice函数,提取第一个字符,判断这个字符是否包含英文,如果包含英文,就让记录英文字数的文本值在原来的基础上+1。完成之后,我们继续用slice函数获取第二位的文本,和前面一样进行判断,如果是英文就在记录英文字数的文本值在原来的基础上+1,后面的位数也是一样操作,每次提取一位,直到提权完最后一位,结束循环。

数字字数和英文字数的逻辑是一样的,只不过把条件变为是否为数字。

中文字数判断,我们需要用到charCodeAt(index)函数,他可以获取目标文本里指定位置字符的Unicode编码,这里我们需要知道,中文编码段19968 ~ 40622,所以如果辅助文本里的unicode编码在19968 ~ 40622之间,就是中文。

如果条件判断出既不是英文、也不是数字和中文,那就是其他字符了,我们用和上面同样的方式来记录即可。

这里需要注意的是,因为我们用的是循环判断,所以每次开始之前循环之前,我们都要把几个记录字数的值设置为0,不然第二次输入就会把之前的累加上去,获取到的值就会远大于真实值。

这样我们就完成动态统计字数的原型模板了,后续使用也很方便,只需要将他们组合,复制粘贴就可以使用了。

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

相关推荐
乔代码嘚9 小时前
2026 AI大模型全套资料免费领!30天从入门到架构部署,附面试真题与行业报告
人工智能·语言模型·面试·大模型·产品经理·ai大模型·大模型学习
生信之灵13 小时前
追踪17只果蝇、7只线虫、10只小鼠,全程无需人工标注:这个无监督跟踪器如何颠覆动物行为研究?
人工智能·深度学习·神经网络·microsoft·交互
星河耀银海1 天前
C语言与数据库交互:SQLite实战与数据持久化
c语言·数据库·sqlite·交互
AI绘画哇哒哒1 天前
RAG 系统中文档切分策略:如何选择合适的 chunk size?| 收藏这份实用指南,小白也能轻松上手大模型学习
人工智能·学习·ai·程序员·大模型·产品经理·转行
python零基础入门小白2 天前
从0到1:手把手教你用Coze打造AI Agent,小白也能转行AI!
人工智能·学习·程序员·大模型·agent·产品经理·ai大模型
python零基础入门小白2 天前
Transformer、Token、RAG全解析,一篇读懂大模型核心机制!
人工智能·深度学习·学习·语言模型·大模型·transformer·产品经理
小智老师PMP2 天前
六月PMP晚启动急救|现在开始,每天2-3小时,稳冲一次上岸(附可直接照搬计划)
算法·软件工程·求职招聘·产品经理·敏捷流程
sunneo2 天前
专栏E-产品品牌与叙事-00-专栏简介
人工智能·产品运营·aigc·产品经理·ai-native
李李李勃谦3 天前
鸿蒙PCBI 报表工具:连接数据库与可视化报表生成
数据库·华为·交互·harmonyos
生成论实验室3 天前
《事件关系阴阳博弈动力学:识势应势之道》第七篇:社会与情感关系——连接、表达与共鸣
人工智能·算法·架构·交互·创业创新