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

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

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

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

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

相关文章

【YashanDB知识库】oracle与yashanDB的jdbc返回常量列“0.00“的精度和刻度不一致

本文内容来自YashanDB官网,原文内容请见 https://www.yashandb.com/newsinfo/7610110.html?templateId1718516 问题现象 客户预期常量列"0.00"应该映射到java里的浮点类型,结果却是跑到整型。 1、应用的sql 2、应用的java代码 3、执行结果…

Ripro V5日主题 v8.3 开心授权版 wordpress主题虚拟资源下载站首选主题模板

RiPro主题全新V5版本,是一个优秀且功能强大、易于管理、现代化的WordPress虚拟资源商城主题。支持首页模块化布局和WP原生小工具模块化首页可拖拽设置,让您的网站设计体验更加舒适。同时支持了高级筛选、自带会员生态系统、超全支付接口等众多功能&#…

CAPL如何设置或修改CANoe TCP/IP协议栈的底层配置

在CANoe中创建网络节点作为以太网主机时,可以给其配置独立的TCP/IP Stack。 配置的协议栈有一些底层配置参数可以在界面上设置或修改,比如: MTU上图中MTU显示500只是图形界面显示错误,正确值是1500。 TCP延迟确认这些参数也可以通过CAPL动态配置,甚至CAPL还可以配置很多界…

县城楼市踩踏式降价,或现2字头,率先回归月薪一平方的合理价格

在一二线城市都在欢呼10月份、11月份成交量回升,楼价回稳的时候,广东一些县城却先顶不住了,大举降价,显示出县城楼市房价率先回归月薪一平方的合理水平,这将对全国楼市产生巨大影响。 据了解这个县城的楼价此前较为稳定…

利用Docker分层构建优化镜像大小

合适docker镜像文件大小不仅影响容器启动效率,也影响资源占用效率。本文介绍如何利用分层方式构建docker镜像,采用多种方式避免镜像文件太大而影响性能。 Docker 镜像大小优化的重要性 资源利用效率 较小的镜像文件在存储和传输过程中占用更少的空间和带…

深度学习面试相关-2024.12.15记录

深度学习 面试相关- 2024.12.15记录 目录 深度学习 面试相关- 2024.12.15记录整体常问问题1数学基础1.1 概率统计1.2 线代 2机器学习算法2.1 深度学习算法2.2 机器学习算法 整体常问问题 https://www.nowcoder.com/discuss/353154899112304640 1数学基础 1.1 概率统计 htt…

从零用java实现 小红书 springboot vue uniapp (2)主页优化

前言 移动端演示 http://8.146.211.120:8081/#/ 前面的文章我们基本完成了主页的布局 今天我们具体的去进行实现 并且分享我开发时遇到的问题 首先先看效果 java仿小红书主页 实现效果为 1.顶端全屏切换 2.上划加载更多 3.下拉当前页整体刷新 顶端全屏切换我们选择 gui-switch…

idea 配置 git .gitignore文件配置

.gitignore 内容 .idea/ *.iml target/ *.class *.log .iml在idea项目里面创建一个.gitignore名字的文件,然后把这个文件提交到git上。我一般是放到.idea同级目录。 我遇到了几种情况这个文件配置了但是不生效的情况 第一种 Git的缓存可能会导致配置不生效。尝试…

双指针---移动0

常见的双指针有两种形式,⼀种是对撞指针,⼀种是快慢指针。 这里写自定义目录标题 题目链接 [移动0](https://leetcode.cn/problems/move-zeroes/description/)问题分析代码解决 题目链接 移动0 问题分析 在本题中,我们可以⽤⼀个 cur 指针来…

人工智能的历史概况和脉络

人工智能( AI ) 的历史始于古代,当时有神话、故事和谣言称,人工生物被工匠大师赋予了智慧或意识。从古代到现在,对逻辑和形式推理的研究直接导致了20 世纪 40 年代可编程数字计算机的发明,这是一种基于抽象数学推理的机器。这种设…

基于Arduino的智能太阳能追光系统设计(论文+源码)

1系统方案设计 本次的设基于Arduino的智能太阳能追光系统的设计,整体结构如图2.1所示。整个系统包括Arduino开发板,按键模块,太阳能板,X轴电机,Y轴电机,电池充电模块,电源模块,四路光照检测模块…

AI+智慧海洋数据集

需要的同学私信联系,推荐关注上面图片 右下角订阅号平台 自取下载。 AI智慧海洋数据可以促进海洋科技领域人工智能新技术产、学、研、用协作,引领行业技术创新,助力AI智慧海洋高质量发展,进一步推广人工智能与海洋科技的融合创新…

56.合并区间

以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间,并返回 一个不重叠的区间数组,该数组需恰好覆盖输入中的所有区间 。 示例 1: 输入:intervals [[1,3]…

域名信息收集(小迪网络安全笔记~

附:完整笔记目录~ ps:本人小白,笔记均在个人理解基础上整理,若有错误欢迎指正! 2.1 域名信息收集 引子:上一章介绍了服务器的信息收集。本篇则介绍在面对存在Web资产企业时,其域名信息该如何收…

怎样使用Eclipse创建Maven的Java WEB 项目

文章目录 1、第一种方式(选择 archetype 方式) 1.1、第一步:创建项目1.2、第二步:配置jre1.3、第三步:配置tomcat1.4、第四步:设置为WEB3.11.5、第五步:配置Maven的编译级别 1.5.1、第一种方法…

细说STM32F407单片机SPI基础知识

目录 一、 SPI接口和通信协议 1、 SPI硬件接口 (1)MOSI(Master Output Slave Input) (2)MISO(Master Input Slave Output) (3)SCK 2、SPI传输协议 (1)CPHA0时的数据传输时序 …

C# OpenCvSharp DNN 实现百度网盘AI大赛-表格检测第2名方案第三部分-表格方向识别

目录 说明 效果 模型 项目 ​编辑 代码 参考 下载 其他 说明 百度网盘AI大赛-表格检测的第2名方案。 该算法包含表格边界框检测、表格分割和表格方向识别三个部分,首先,ppyoloe-plus-x 对边界框进行预测,并对置信度较高的表格边界…

Excel + Notepad + CMD 命令行批量修改文件名

注意:该方式为直接修改原文件的文件名,不会生成新文件 新建Excel文件 A列:固定为 renB列:原文件名称C列:修改后保存的名称B列、C列,需要带文件后缀,为txt文件就是.txt结尾,为png图片…

数据结构-排序(来自于王道)

排序的基本概念 插入排序 在这个算法中,除了输入的数组本身,没有使用额外的数据结构来存储数据,所有的操作都是在原数组上进行的。因此,无论输入数组的大小 n 是多少,算法执行过程中所占用的额外空间是固定的&#xff…

【编译器】传统编译器和AI/ML编译器总结

前言 本文总结了传统编译器和AI/ML编译器,可作为学习、研究、研发的参考资料。 1.编译器-GC Clang Clang是一个C、C、Objective-C和Objective-C编程语言的编译器前端。它采用了LLVM作为其后端,由LLVM2.6开始,一起发布新版本。它的目标是提供一…