同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴...

实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴

检测input、textarea输入改变事件有以下几种:

1、onkeyup/onkeydown 捕获用户键盘输入事件。
缺陷:复制粘贴时无法检测
2、onchenge
缺陷:要满足触发条件:当前对象的属性改变(由键盘或鼠标触发)且对象失去焦点
3、onpropertychange 当前对象属性改变就会触发
缺陷:只支持低版本IE
4、oninput 和onpropertychange类似,当前对象属性改变就会触发
缺陷:不支持低版本IE
可以看出以上几种方法都有各自的缺陷,1和2一般不能满足需求,3和4的缺陷正好互补,两个事件结合起来使用可以兼容IE、firefox、chrome;
所以同时绑定onpropertychange 和 oninput 可以达到实时检测输入内容的目的
(jquery用propertychange 和 input)。
代码实例(jquery):
<!--superGG1990原创发表于博客园http://www.cnblogs.com/superGG1990,其他商业网站转载均为盗版,个人博客网站转载请注明出处 2017-05-12-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>监听输入事件</title><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><style>b {color:red; font-size:18px;}</style>
</head>
<body><textarea style="width:800px; height:300px;"></textarea><div>你已经输入了<b>0</b>个字</div><script>$('textarea').on('input propertychange',function(){var val = $(this).val()var textNum = val.length;if(textNum > 200){textNum = 200;}$('b').html(textNum)//超过200个字提示if(val.length>200){var textVal = val.substring(0,200)$(this).val(textVal)alert('评论内容大于200字')}})</script>
</body>
</html>

原文出处 superGG1990  www.cnblogs.com/superGG1990

转载于:https://www.cnblogs.com/baiyangyuanzi/p/6856598.html

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

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

相关文章

hp laser103 属性没有配置项_(常见解决方法)UEditor报错“后端配置项没有正常加载,上传插件不能正常使用”...

&#xff08;常见解决方法&#xff09;UEditor报错“后端配置项没有正常加载&#xff0c;上传插件不能正常使用”_向来萧瑟也无畏-CSDN博客​blog.csdn.net报错信息详见此文的“排错过程&&错误信息”→ueditor无法上传图片_向来萧瑟也无畏-CSDN博客3种解决方法1.大小写…

WinForm(十二)画图

在.NET中&#xff0c;画图主要是通过Graphics类实现的&#xff0c;这个类主要通过两类方法完成画图&#xff0c;一类是DrawXXX&#xff0c;画各种线条图形&#xff1b;另一类是FillXXX,用各种形状&#xff0c;填充各种图形。Graphics是画板&#xff0c;Draw各个方法是各种盏笔&…

从4个方面简单介绍SaaS

你了解什么是SaaS吗&#xff1f;SaaS有什么优势&#xff1f;选择SaaS平台要注意哪些要素&#xff1f;在这里&#xff0c;怡海软件将针对这些问题进行简单介绍&#xff1a; 什么是SaaS&#xff1f;SaaS是Software-as-a-Service&#xff08;软件即服务&#xff09;的简称&#xf…

腾讯的一笔画游戏--巧妙解法

根据这个图形我们可以发现图中的规律。 所有数据的和 所有边长的和-最后一个形状的一个边-除最后一个边之外所有边的一半。 知道了这个规律后我们就很容易去实现代码了&#xff1a; 这里的解决关键点为——“余弦定理”&#xff0c;因为角度我们可以用&#xff08;n-2&#xf…

Map value类型不同的写法

Map value类型不同的写法 Map<String, Object> accountMapnew HashMap<String, Object>(); int userId data.get("userId").getAsInt(); int accType data.get("accType").getAsInt();String name data.get("accType").getAsStr…

mysql中局部变量说法正确的是_mysql全局变量和局部变量

全局变量和局部变量在服务器启动时&#xff0c;会将每个全局变量初始化为其默认值(可以通过命令行或选项文件中指定的选项更改这些默认值)。然后服务器还为每个连接的客户端维护一组会话变量&#xff0c;客户端的会话变量在连接时使用相应全局变量的当前值初始化。举一个例子&a…

Web应用架构-Full-text Search Service

Elasticsearch转载于:https://www.cnblogs.com/zhitianji/p/9728016.html

终于找到你!如何将前端console.log的日志保存成文件?

本篇文章来自一个需求&#xff0c;前端websocket会收到各种消息&#xff0c;但是调试的时候&#xff0c;我希望把websoekt推送过来的消息都保存到一个文件里&#xff0c;如果出问题的时候&#xff0c;我可以把这些消息的日志文件提交给后端开发区分析错误。但是在浏览器里&…

基于 .NET 6 开发的开源远程终端工具

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;有用的工具&#xff0c;不要忘记关注。今天介绍一个非常实用的工具 mRemoteNG&#xff0c;这是一个基于 .NET 6 开发的远程终端软件&#xff0c;开源免费&#xff0c;不用担心版权和软件费用…

mysql 行列转换 动态_mysql 行列动态转换的实现(列联表,交叉表)

(1)动态&#xff0c;适用于列不确定情况create table table_name(id int primary key,col1 char(2),col2 char(2),col3 int);insert into table_name values(1 ,A1,B1,9),(2 ,A2,B1,7),(3 ,A3,B1,4),(4 ,A4,B1,2),(5 ,A1,B2,2),(6 ,A2,B2,9),(7 ,A3,B2,8),(8 ,A4,B2,5),(9 ,A1,…

第六次作业—例行报告

本周PSP 进度条 代码累计折线图 博文累计折线图 本周饼状图 转载于:https://www.cnblogs.com/zej87/p/7738895.html

Tomcat7/8开启WebDAV的支持

WebDAV是一种超文本传输协议&#xff0c;Tomcat默认是支持WebDAV的&#xff0c;且默认为禁用状态。 更多详细信息&#xff0c;请参考&#xff1a; https://zh.wikipedia.org/wiki/WebDAV http://www.webdav.org/ 开启步骤如下&#xff1a; 1、在Tomcat的webapps目录下新建webda…

算法复杂度分析(下)

前一篇文章算法复杂度分析&#xff08;上&#xff09;讲述了复杂度的大 O 表示法和几个分析原则&#xff0c;这篇文章我们来讲讲另外几种复杂度&#xff0c;最好情况时间复杂度&#xff08;best case time complexity&#xff09;、最坏情况时间复杂度&#xff08;worst case t…

免费分享一些.NET Core比较优秀的社区资料和微软官方资料

这次小编所分享的这套笔记手册&#xff0c;主要是分享一些.NET Core比较优秀的社区资料和微软官方资料。已经把所有的重要知识点进行了完整的归类和整理&#xff0c;可以让大家更清晰和快速的学习.NET Core&#xff0c;不浪费任何多余的时间&#xff01;全网首发&#xff01;相…

python异或运算怎么算_小强学Python+OpenCV之-1.4.4掩膜mask及位运算(与、或、非、异或)...

问题引入在小强学PythonOpenCV之&#xff0d;1.4.2裁剪一节&#xff0c;我们使用的是numpy数组切片功能实现图片区域的裁剪。那么&#xff0c;如果我们想要裁剪图像中任意形状的区域时&#xff0c;应该怎么办呢&#xff1f;答案是&#xff0c;使用掩膜(masking)。但是这一节我们…

51 Nod 1670 打怪兽

1670 打怪兽lyk在玩一个叫做“打怪兽”的游戏。游戏的规则是这样的。lyk一开始会有一个初始的能量值。每次遇到一个怪兽&#xff0c;若lyk的能量值>怪兽的能量值&#xff0c;那么怪兽将会被打败&#xff0c;lyk的能量值增加1&#xff0c;否则lyk死亡&#xff0c;游戏结束。若…

QQ协议调试器 QQDebugger

QQ协议老变&#xff0c;为了分析协议&#xff0c;单用抓包工具还是不够的&#xff0c;还是得需要很好的调试工具。在网上找了几个调试工具&#xff0c;易用性均欠佳&#xff0c;不得已自己开发了一个 QQDebugger&#xff0c;不敢专美&#xff0c;特意发布出来。QQDebugger 在功…

PostgreSQL 10.1 手册_部分 II. SQL 语言_第 5 章 数据定义_5.5. 修改表

5.5. 修改表 5.5.1. 增加列5.5.2. 移除列5.5.3. 增加约束5.5.4. 移除约束5.5.5. 更改列的默认值5.5.6. 修改列的数据类型5.5.7. 重命名列5.5.8. 重命名表当我们已经创建了一个表并意识到犯了一个错误或者应用需求发生改变时&#xff0c;我们可以移除表并重新创建它。但如果表中…

Uptime-Kuma 一个轻量的开源监控工具

点击蓝字 关注我们你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;有用的工具&#xff0c;不要忘记关注。今天给大家介绍一个开源的监控工具 Uptime Kuma, 主要用来监控 Web 以及网络, 和 Prometheus 相比, 它是轻量的, Uptime Kuma 是基于…

怎么查看mysql正在运行的语句_MySQL如何查询当前正在运行的SQL语句

通过status命令&#xff0c;查看Slow queries这一项&#xff0c;如果值长时间>0,说明有查询执行时间过长以下为引用的内容&#xff1a;mysql> status;--------------mysql Ver 11.18 Distrib 3.23.58, for redhat-linux-gnu (i386)Connection id: 53Current database: (n…