原生js监听input值发生变化
原生JS中可以使用oninput,onpropertychange,onchange
oninput,onpropertychange,onchange的用法
1) onchange 触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur);
2) onpropertychange ,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
3) oninput 是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
亲自测试
Ie9以下通过 onpropertychange能监听到input值的改变


在Ie9,及其以上和谷歌浏览器测试时通过 oninput 来监测值的改变


JQuery
通过bind方法来监听input值发生改变
$("#inputs").bind('input propertychange',function(e){
console.log($(this).val())
})

用的bind,当遇到追加的新input标签时,则不能监听了,可以使用live替代
$('input').live('input propertychange', function()
{
//获取input 元素,并实时监听用户输入
//逻辑
})
原生js监听input值发生变化的更多相关文章
- 原生js监听input值改变事件
哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
- 原生Js监听普通dom尺寸变化
原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 ...
- js监听input输入框值的实时变化实例
情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- 监听INPUT值的即时变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq 监听input值的变化
$(".popWeiXing .name").bind("input propertychange", function() { modValue.diyDat ...
随机推荐
- python的信号管理
if __name__ == '__main__': # Make it possible to exit application with ctrl+c on console signal.sign ...
- select类型的input
在选择类型一般都会用到下拉框 下拉选择类型 下拉框的类型就是在div中加一个select标签 然后在后面追加格式就行了 格式为 <select> <option value=&q ...
- 检验多个xsd的xml是否合法
Java - 使用 XSD 校验 XML https://www.cnblogs.com/huey/p/4600817.html 这种方法不支持多个xsd文件,会报错 可以使用XMLBeans Too ...
- Redis存储Sortedset
与set相比Sortedset多了一个数字与set中的各个元素相关联. 存储结构: 1.添加元素: 添加元素的时候元素一定不能相同,如果已存在该元素,表示插入失败返回0,成功返回1,但是不同元素的数字 ...
- 手工部署yugabyte的几点说明
ntp 时间同步 ntp 时间同步对于yugabyte 是一个比较重要的服务,需要注意时间的同步 YB-Master 个数的说明 原则 YB-Master 的个数,必须和复制因子的个数一样,同时mas ...
- 50、Spark Streaming实时wordcount程序开发
一.java版本 package cn.spark.study.streaming; import java.util.Arrays; import org.apache.spark.SparkCon ...
- GDOI2018 小学生图论题 [NTT]
并没有传送门qwq 思路 首先要知道一个结论(或者说是一个套路):一个竞赛图缩点之后必定是一条链. 那么强联通分量的个数,就是这条链的边数+1. 考虑一条边什么时候会出现:当且仅当点集可以被分成\(S ...
- GitHub如何删除一个代码仓库
进入GitHub之后,点击“your repositories”查看所有的代码仓库. 在代码仓库中选择一个需要删除的,进入其详情页 在详情页中找到“setting”设置,下拉至最后可以看到删除选项. ...
- avalon数据已更新,视图未更新的bug修复
$computed: { pinlei() { var key = this.currentProduct.key || 'youpin'; console.log(key, "我是key& ...
- Win10电脑桌面壁纸自动变成黑色无法更换怎么解决
很多用户在升级到win10之后,发现在使用过程中经常会碰到一些问题,就是电脑桌面壁纸总是会自动变成黑色,而且无法设置桌面背景壁纸,这是怎么回事呢,出现这样的问题可能是因为系统不是正版,或者是电脑设置不 ...