前端页面 数据处理input、textarea输入框实时 统计字数(真实字数)

如何使用JavaScript,纯前端实现字符、字数统计? 快速目录统计字数/字符在线演示????实现逻辑????判断规则⚖️正则表达式Unicode编码代码实现✌️统计中文统计英文和数字总结???? 统计字数/字符 平时,在写一些报告时,需要统计字数;亦或者,我们在填写一些信息,有字数要求。这个时候,大部分人会打开Word,进行字数统计。这样效率过低,且无法模块化移植。(而且macOS启动Microsoft Word挺慢的????……) 本次给大家介绍,如何使用JavaScrip前端统计输入内容所包含的字符和字数。稍微美化一下,放到服务器里,以后统计文字字数就不用 阅读详情

需求:实时监听textarea/input的输入变化,并在页面上显示还能够输入多少字符。

初始做法(有问题,不准确):

仅仅使用on keyup事件  :导致在输入的时候会根据输入法状态把汉字拼音算进去,在换成汉字时并不改变统计结果

如下图:

改过的方法 使用多个事件绑定(可行):

//实时监听字数变化
$(document).ready(function(){
    $('.input').on('input focus keyup',
        function(){
			var strs   = getByteLen($(this).val());
			remain = strs.length;
			var content_msg = remain+'字';
			$(this).next().html(content_msg);			
        }
    );
});


//获取除标点符号之外的字数
function getByteLen(val) {
	strs = val.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\,|\。|\?|\:|\;|\‘|\’|\”|\“|\、|\·|\!|\(|\)|\》|\《|\『|\』]/g,""); 
	//let recxType = /^[0-9A-Za-z\u4e00-\u9fa5]{15,}$/;
	return strs; 
}

 

前端学习(205):animation动画库 动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e... 阅读详情

相关推荐

【Javascript学习笔记】【input、textArea实时显示剩余可输入的字数】

目录 目录 实时显示剩余可输入的字数 效果 代码 快捷链接 实时显示剩余可输入的字数 效果 代码 html部分 &amp;lt;h2&amp;gt;实时显示剩余可输入的字数(字母,数字,中文都算一个字)&amp;lt;/h2&amp;gt; &amp;lt;h&amp;gt;昵称:&amp;lt;/h&amp;gt; &amp;lt;input type=&quot

m0_37136491的博客 2734

web前端 --- 表单标签

标签用于定义表单域,以实现用户信息的收集和传递,将范围内的表单元素提交给服务器。

weixin_62443409的博客 9715

如何实现textarea中获取动态剩余字数的方法

工作中遇到一个案例,之前没有写过,今儿啃了半个下午硬是给写出来,灰常又成就感!当然对于js大牛来说这根本不算啥,但是对于我自己的js能力又向前迈出一小步。 案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能。当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下。当然我的封装还有缺漏,但是基本功能是实现了。 首先介绍下单个textarea实现案例 html部分: XML/HTML Code复制内容到剪贴板 <textarea id="text_txt1"></tex

小程序中textarea字数限制与计算

不管做什么类型的项目,几乎都会碰到评论框。正好也是项目需要,就顺便来总结总结: 在以往的前端中,大家都知道很容易实现。那么,在小程序中,如何去实现它呢?其实,只要你仔细看了官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html也很容易,思路如下: 1、在textarea中绑定bindinput事件。 2、通过...

逍遥的博客 802

Java电商秒杀系统性能优化(一)——电商秒杀系统框架回顾

电商秒杀系统框架回顾项目简介外部依赖框架回顾项目要点项目中存在的问题小结 课程是免费的,课程地址如下:SpringBoot搭建电商秒杀项目,课程真的很棒,作者的思路很清晰,建议各位读者可以跟着视频练习一下这个项目; 项目简介 通过SpringBoot快速搭建的前后端分离的电商基础秒杀项目。项目通过应用领域驱动型的分层模型设计方式去完成:用户otp注册、登陆、查看、商品列表、进入商品详情以及倒计时秒...

ghw15221836342的博客 3718

模拟IC设计笔记:拆解一个经典的时钟占空比校正(DCC)电路模块,从理论到SPICE仿真

本文深入解析了时钟占空比校正(DCC)电路在模拟IC设计中的关键作用,特别是在高速ADC应用中。通过晶体管级拆解,详细介绍了基于电荷泵和积分器的模拟反馈型DCC电路设计,包括占空比检测、误差放大与校正执行单元的实现。文章还提供了SPICE仿真验证方法,确保电路在100MHz时钟下的稳定性和性能。

weixin_33725722的博客 424

input,textarea计算文本域字数

//计算文本域字数 $(document).on('keyup','.J_input',function(){ numLimit($(this)); }); $(document).on('focus','.J_input',function(){ numLimit($(this)); }); functionnumLimit(obj){ varval=obj.val(); ...

dujunuan的博客 312

HFSS与AI融合:智能算法如何重塑天线设计流程

本文探讨了HFSS与AI融合如何通过智能算法革新天线设计流程。在5G/6G通信时代,AI技术如机器学习和遗传算法显著提升了高频电磁场仿真效率,将传统设计周期从数周缩短至数小时,并优化了天线性能。文章详细介绍了AI与HFSS的集成策略、关键技术突破及典型应用案例,展示了智能算法在天线设计中的巨大潜力。

weixin_29035147的博客 774

js计算textarea输入文字的长度

前言 日常开发过程中,有些时候我们想使用textarea,然后限制输入的长度,在textarea末尾显示剩余可输入的字节数。 如下图: 解决方法: 常用的有三种方法: 1、通过判断charCodeAt,区分字母与中文 ,然后计算字符串的长度。 2、通过使用charCodeAt 和 0xff00区分中文与英文,这个代码量稍微减少一些。 3、使用正则,把输入的中文...

weixin_30876945的博客 1229

模拟电子技术课设-压控信号发生器

正弦波产生电路的目的就是使电路产生一定频率和幅度的正弦波,我们一般在放大电路中引入正反馈,并创造条件,使其产生稳定可靠的振荡。由于图2.3-1所示电路中存在RC电路和积分电路两个延迟环节,在实用电路中,将它们“合二为一”,即去掉方波发生电路中的RC回路,使积分运算电路即作为延迟环节,又作为方变三角波电路,滯回比较器和积分运算电路的输出互为另一个电路的输入。接着对各单元电路的工作原理进行了分析,由直流稳压电源电路提供所需电压,文氏振荡器产生正弦波,滞回比较器产生方波,滞回比较器与积分器连接产生三角波。

Sulfurone的博客 5323

Synopsys SCL许可证服务器搭建详解:从安装到生成.dat文件

本文详细解析了Synopsys SCL许可证服务器的完整搭建流程,从系统环境准备、SCL安装到生成.dat文件。重点阐述了如何正确获取HOST ID、配置License文件以及调试常见故障,为数字芯片设计工程师提供了一套从零到一的实战避坑指南,确保EDA工具链稳定运行。

weixin_29306011的博客 609

Vue实现动态显示textarea剩余字数

原文地址:http://www.jb51.net/article/114382.htm Vue实现动态显示textarea剩余文字数量,具体内容如下 这里我们假设允许用户输入的最多数量为200个  html代码如下: ? 1 2 textarea maxlength="200" @input="d

杨春建的博客 7275

【Python爬虫案例教学】超简洁代码采集原神所有角色信息

(。・∀・)ノ゙嗨 大家好,这里是池鱼

xiaoyuan_____的博客 2419

Web前端制作一个评论发布案例

事件委托:将删除事件绑定在父元素(ul) 上,通过事件对象 e.target 判断触发源(是否为删除按钮 .the_del ),解决动态生成元素无法绑定事件的问题。- 模板字符串(隐式):通过 ${变量} 拼接HTML结构和动态数据(昵称、头像、时间、发布内容),简化字符串拼接操作。- 内容重置:通过修改元素 value (文本域)、 textContent (普通元素)实现内容清空/更新。- 事件绑定: addEventListener() 为元素绑定事件(推荐方式,可绑定多个同类型事件)

H_z_q2401的博客 842

CUDA 12.1环境下的动态库链接修复:从libcusparse.so.12的undefined symbol错误到libnvJitLink.so.12的正确加载

本文详细解析了在CUDA 12.1环境下,PyTorch因libcusparse.so.12找不到libnvJitLink.so.12中的__nvJitLinkAddData_12_1符号而报错的根本原因。通过诊断动态链接过程,提供了创建符号链接、修改环境变量等三种解决方案,并深入探讨了nvJitLink组件的作用及环境配置的最佳实践,帮助开发者彻底解决此类动态库链接问题。

c8d9e0f1的博客 204

CVE-2021-3156本地提权漏洞复现

受影响版本 sudo: 1.8.2 - 1.8.31p2 sudo: 1.9.0 - 1.9.5p1 测试 我这里是在本地centos7上进行测试。 需要目标机器上存在python编译器、目标主机出网或者能上传文件到目标主机。 以非root用户登录系统,并运行如下命令: sudoedit -s / 通常响应一个以 sudoedit: / 开头的报错,多半存在漏洞。 利用 提权脚本: https://www.o2oxy.cn/wp-content/uploa

The current road is different, love needs to distinguish between right and wrong 3776

AI实战避坑指南:从工具清单到肌肉记忆的跃迁

AI开发不是工具堆砌,而是认知框架、工程思维与生产意识的系统构建。理解Vibe Coding的本质,需先厘清‘工具是能力放大器而非替代品’这一底层原理;掌握提示词工程、环境变量治理、静态资源路径、数据库约束、错误监控盲区等关键技术价值;落地于Web应用部署、AI增强型前端、低代码集成等真实场景。尤其在用户需求模糊、技术栈选型纠结、生产环境失稳时,真正起决定作用的,是开发者对Spec Coding(规范驱动)、降级设计、成本感知和最小验证环的深度实践——这正是vibe coding与传统编程范式分野的核心。

shirlly 458

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

对原生input和textarea进行修改,加上: 当前输入字数/最大输入字数,同时针对英文为一个字符,一个汉字为两个字符的逻辑

【代码】对原生input加上:当前输入字数/最大输入字数。

fury的博客 528

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

前端表单校验输入字数

【代码】前端表单校验输入字数。

weixin_45644355的博客 803

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

antd组件 Input和TextArea输入字数限制

记录下antd两个标签输入时字数限制 1.Input maxLength={20},注意maxLength是number类型 <Input placeholder="张三 2019-05-17" maxLength={20} /> 2.TextArea <TextArea placeholder="请输入说明" autosize={{ minRows: 2, maxRows: ...

2万+

web前端面试-------input与textarea的区别以及用div模拟textarea

1.input与textarea的区别 &lt;input&gt;是单行文本框,不会换行。通过size属性指定显示字符的长度,注意:当使用css限定了宽高,那么size属性就不再起作用。              value属性指定初始值,Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高,但是也不会              增加行数。 &lt;...

别告诉我有Bug 1万+

小程序input与textarea字符计算坑

微信小程序的input组件与textarea组件有一个参数是maxLength,用来限制输入字数的长度,但是有个坑:小程序的字符长度是按照字节数限制的,而不是字符数限制的,那么就造成Emoji的输入长度有问题。 由于javascript使用但是usc-2的编码,对于2个字节字符的Unicode,js是解析起来66的。但是会有以下问题 不常用字符,比如"????"或者某些emoji表情(或者组合表情????+...

ViancaChen的博客 849

html input 数值计算,JS操作input标签内数值计算

这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。window.onload=function(){var oIput1=document.getElementById('put1');var oIput2=document.getElementById('put2');var nAdd=document.getElementById('add');var nSub=documen...

weixin_39850331的博客 711

uniapp-H5、vue 中好用的textarea右下角显示字数限制

先看效果是你想要的不! html <textarea class="JTxtArea lg" :maxlength="88" :data-maxnum="reason.length+'/88'" @input="inputReason" auto-height :value="reason"></textarea> js inputReason(e){ this.reason=e.detail.value; } scss .JTxtArea { ba

Jone's Area 6069

控制textarea文本长度,并限制输入字数(带统计显示)的特效(一)

        控制textarea文本长度,并限制输入字数(带统计显示)的特效 特效代码如下(提示用alert的): &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xml...

w_gaoping的博客 524

前端页面 div+css内容太长,实现点击展开余下全文(修改版)

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文章高度展开&lt;/title&gt; &lt;style&gt; .content{ padding:10px 12px 48px; f

阿……莫西林杀菌室 1万+
上一篇: Linux 开启MySQL binlog日志 、并通过binlog文件 恢复mysql 数据库
下一篇: 前端页面 卡片浮动、分类动态切换 瀑布流形式
阿……莫西林
博客等级 码龄9年 42粉丝 111原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值