【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，不然第二次输入就会把之前的累加上去，获取到的值就会远大于真实值。

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

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

原文地址：https://blog.csdn.net/mushe93/article/details/144442495

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！