实时检测 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

同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴的更多相关文章

  1. 使用 onpropertychange 和 oninput 检测 input、textarea输入改变

    检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象 ...

  2. js 实时监听textarea输入

    html: <textarea class="area" name="" id="text1" maxlength="100 ...

  3. ie下的值改变事件

    前两天在页面上写了一个值改变事件,值是用js改变的,用的oninput方法和onpropertyChange方法,但是可能是因为框架的缘故,在ie浏览器下,陷入了莫名其妙的循环中.然后考虑是在加载的时 ...

  4. 正确处理WPF中Slider值改变事件的方式

    最近在用WPF数据绑定重写一下播放器项目时遇到的关于Slider的问题,在窗体透明度调节和播放进度调节上用了Slider控件.调节窗体透明度我是 这么想的:将窗体的Opacity属性的值与Slider ...

  5. 原生js监听input值改变事件

    哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...

  6. oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测

    这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...

  7. onchange onpropertychange 和 oninput 事件的区别

    onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发. onpropertychange 事件却是实时触发,即每增加或删除一个字符就会触发,通过 js 改变也会触发该事件,但是 ...

  8. 即时搜索或input实时检测监听输入框变化

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...

  9. 监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等

    转自:http://blog.csdn.net/itchiang/article/details/7769337 要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增 ...

随机推荐

  1. redis 的一主二从三哨兵模式

    概述 在部署redis 的时候,如果redis宕机,缓存将不可用,redis提供了哨兵模式保证redis实现高可用. 即一台主机两台从机,三台哨兵主机,如果主实例宕机,哨兵将将一台从机升级为主机.实现 ...

  2. 乌龙之MySQL slave IO status:connecting

    搭建了一个主从,状态一直如下: 检查错误日志报错如下: review搭建过程,语法并没有问题. 检查用户及网络,也没有问题: so?what is the cause ? 等等....貌似上面搭建用的 ...

  3. Effective C++ 随笔(4)

    条款21:必须返回对象时,别妄想返回其reference 例子: Raional类可以执行有理数的一些运算,并且使用heap内存申请 并且其operator*函数为 const Rational&am ...

  4. css基本图形绘制(基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等)

    正方形: 代码: <style> .square { width: 100px; height: 100px; background-color: cornflowerblue; } &l ...

  5. volatile 实现 单例模式

    单例模式的一种实现方式,但很多人会忽略volatile关键字,因为没有该关键字,程序也可以很好的运行,只不过代码的稳定性总不是100%,说不定在未来的某个时刻,隐藏的bug就出来了. 双重校验锁 cl ...

  6. python计算机硬件基础以及变量常量常量池,解释器编译器比较,python的两种运行方式

    1.什么是编程语言 语言是一个事物与另外一个事物沟通的介质 编程语言是程序员与计算机沟通的介质 2.什么是编程 编程就是程序按照某种编程语言的语法规范将自己想要让计算机做的事情表达出来 表达的结果就是 ...

  7. 2018-01-06自定义view时遇到的问题

    1.设置蒙版的简单写法: 2.

  8. ADALINE小demo

    线性逼近 clear;clc;close all x = [1,0.5; 1.5,1.1; 3,3; -1.2,-1]; y = x(:,2); x = [ones(size(x,1),1),x(:, ...

  9. 阿里云服务器 OSS的使用限制

    使用限制 更新时间:2019-02-12 16:50:27 编辑 · OSS的使用限制及性能指标如下:   限制项 说明 归档存储 已经存储的数据从冷冻状态恢复到可读取状态需要 1 分钟的等待时间. ...

  10. 谈谈HashMap线程不安全的体现

    原文出处: Hosee HashMap的原理以及如何实现,之前在JDK7与JDK8中HashMap的实现中已经说明了. 那么,为什么说HashMap是线程不安全的呢?它在多线程环境下,会发生什么情况呢 ...