【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,一经查实,立即删除!

相关文章

LeetCode 3266.K 次乘运算后的最终数组 II:堆(快速幂)

【LetMeFly】3266.K 次乘运算后的最终数组 II:堆(快速幂) 力扣题目链接:https://leetcode.cn/problems/final-array-state-after-k-multiplication-operations-ii/ 给你一个整数数组 nums ,一个整数 k 和一个整数 m…

【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原生小工具模块化首页可拖拽设置,让您的网站设计体验更加舒适。同时支持了高级筛选、自带会员生态系统、超全支付接口等众多功能&#…

前端页面图片滑动验证

开源项目地址&#xff1a;monoplasty/vue3-slide-verify 安装命令&#xff1a; npm install --save vue3-slide-verify 在登录页面添加代码&#xff1a; <template> <!-- 登录验证码对话框 --> <el-dialog v-model"dialogVisible" title"验…

pyhton 批量往PDF文件指定位置里面填写数据

pyhton 批量往PDF文件指定位置里面填写数据 import PyPDF2 from PyPDF2 import PdfReader, PdfWriterdef modify_pdf(input_pdf_path, output_pdf_path, page_number, x, y, text):reader PdfReader(input_pdf_path)writer PdfWriter()for page in reader.pages:writer.add_p…

MySQL迁移SQLite 借助PYTHON脚本

使用 Python 脚本将 MySQL 数据库迁移到 SQLite 是一种灵活且强大的方法。 下面是一个基本的脚本示例&#xff0c;使用 pandas 和 sqlite3 库来实现这一过程。 这个脚本假设你已经安装了 pandas 和 mysql-connector-python 库。 步骤 安装必要的库: 如果尚未安装&#xff…

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

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

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

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

【前端面试题】书、定位问题、困难

看过什么书 《JavaScript 高级程序设计&#xff08;第 4 版&#xff09;》&#xff08;作者&#xff1a;Matt Frisbie&#xff09; 这是一本深入学习 JavaScript 语言的经典书籍。它详细地涵盖了 JavaScript 的高级特性&#xff0c;包括原型链、闭包、异步编程等复杂概念。以闭…

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

合适docker镜像文件大小不仅影响容器启动效率&#xff0c;也影响资源占用效率。本文介绍如何利用分层方式构建docker镜像&#xff0c;采用多种方式避免镜像文件太大而影响性能。 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…

大模型呼出机器人能够解决哪些问题?

大模型呼出机器人能够解决哪些问题&#xff1f; 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 大模型呼出机器人作为现代科技在客户服务领域的创新应用&#xff0c;能够解决多个方面的问题&#xff0c;以下是…

Python面试常见问题及答案4

一、内存管理相关 问题&#xff1a;Python中的垃圾回收机制是如何工作的&#xff1f; 答案&#xff1a;Python主要使用引用计数来进行垃圾回收&#xff0c;当对象的引用计数为0时&#xff0c;该对象就会被垃圾回收器回收。此外&#xff0c;Python还有一个循环垃圾收集器来处理循…

从零用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名字的文件&#xff0c;然后把这个文件提交到git上。我一般是放到.idea同级目录。 我遇到了几种情况这个文件配置了但是不生效的情况 第一种 Git的缓存可能会导致配置不生效。尝试…

linux 下nmcli命令使用方法

1、nmcli 是 NetworkManager Command Line Interface 的缩写。 详细解释 NetworkManager: 是 Linux 上常用的网络管理工具&#xff0c;负责管理有线、无线、VPN 等网络连接。 Command Line Interface (CLI): 意味着 nmcli 是 NetworkManager 的命令行界面工具&#xff0c;提…

双指针---移动0

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

《智能体开发实战(高阶)》四、系统化的日志周报智能体开发计划

智能体扩展与完善规划 为了将前几个章节的智能体逐步扩展为支持整个公司团队使用的高效工具,以下是分阶段的完善与扩写规划。每个阶段旨在提升功能覆盖范围、处理能力和用户体验,并为企业提供实际价值。 阶段一:基础功能完善 目标:巩固现有功能,提升健壮性和适用性。 支…

linux从frame buffer中将qt界面拷贝出来放到u盘的操作方法

使用的是gsnap工具&#xff0c;源码可以在百度上搜,以Imx6为例的使用方法 rootimx6qsabresd:~# rootimx6qsabresd:~# rootimx6qsabresd:~# df Filesystem 1K-blocks Used Available Use% Mounted on /dev/root 289293 197510 76423 73% / devtmpfs …

Python+OpenCV系列:滤波器的魔力

滤波器是图像处理领域中不可或缺的工具。无论是去除噪声、锐化图像还是提取特征&#xff0c;滤波器都扮演着重要角色。本篇将从简单到复杂&#xff0c;带你快速掌握 PythonOpenCV 中的滤波器使用技巧。 什么是滤波器&#xff1f; 滤波器是一种对图像像素值进行计算、平滑或增强…