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

检测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，其他商业网站转载均为盗版，个人博客网站转载请注明出处 2017-05-12

转载于:https://www.cnblogs.com/superGG1990/p/6846799.html

使用 onpropertychange 和 oninput 检测 input、textarea输入改变相关推荐

同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴...
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
input 中事件 onchange onpropertychange 和oninput事件的差别
汇总onchange onpropertychange 和oninput事件的差别: 1.onchange事件与onpropertychange事件的差别: onchange事件在内容改变(两次内容有 ...
6- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 标题: js监听输入框值的即时变化onpropertychange.oninput事件参考: http://m.jb51. ...
onchange onpropertychange 和oninput事件的区别
汇总onchange onpropertychange 和oninput事件的区别: 1.onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容 ...
使输入框(input textarea)变为只可读状态readonly=readonly，禁用输入框disabled=disabled...
使输入框变为只可读状态 readonly="readonly" <input class="select-city" placeholder=" ...
html限定输入的内容,HTML中限制input 输入框输入内容
限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就 ...
【杂记】（input获取焦点失去焦点、获取input中输入的值、键盘事件、js事件、Math 属性、手机自适应meta定义、去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
1. input获取焦点失去焦点 input:focus{border:1px red solid:} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <inp ...
如何禁止input框输入特殊字符
如何禁止input框输入特殊字符前端开发中可能会碰到input框禁止输入特殊字符的情况,下面是解决办法,输入框内只能输入字母数字和基本汉字,亲测有效. HTML部分 <div class=&q ...
java中限制只能为正数_vue 限制input只能输入正数的操作
在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. class="keep_input" ...
html onblur ios,移动web端键盘问题、IOS安卓机input/textarea兼容性
前言:移动web开发中,安卓和IOS的input/textarea输入框在调用键盘是有差异的:安卓机键盘覆盖在页面底部:IOS机键盘将整个页面向顶部推.两种实现在真机上都会导致页面出现某些小问题,本篇 ...

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

使用 onpropertychange 和 oninput 检测 input、textarea输入改变相关推荐

最新文章

热门文章