原生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 ...
随机推荐
- php正则表示中的元字符
元字符 抛出问题: \d 代表匹配一个字符.而我现在想要匹配十个八个,任意多个数字肿么办? 这个时候我们就要用到元字符.在使用原子的时候,发现只能够匹配一个字符,可是要匹配多个字符就出现了问题.大理石 ...
- vant - Navbar slot 插槽使用
//子组件 <template> <van-nav-bar> <slot slot="left" name="left">& ...
- 移动端tap事件(轻击、轻触)
一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...
- render函数、createElement函数与vm.$slots
1.render函数.createElement函数 Vue.component('es-header', { render: function (createElement) { return cr ...
- gdb 调试core文件报错: in free () from /lib64/libc.so.6 找不到原因啊
运行程序死掉 找不到原因啊..gdb 跟踪与堆栈信息 贴出来了 麻烦大佬们看一下,给个回复,不胜感激!! Core was generated by `./scene_s0037 10037'.Pr ...
- 第09组 Alpha冲刺(3/4)
队名:软工9组 组长博客:https://www.cnblogs.com/cmlei/ 作业博客:https://edu.cnblogs.com/campus/fzu/SoftwareEngineer ...
- 【Qt开发】vs2017+qt5.x编译32位应用
概述 最近有同学私信我,问如何使用vs2017+qt5.10编译出32位的应用,需要使用msvc2017_x86的插件,然而qt官网并没有提供,只能使用源码编译生成msvc2017_x86插件,使用n ...
- em,rem,px的区别,以及实现原理?
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.em是相对长度单位.相对于当前对象内文本的字体尺寸举个例子:比如说当前容器`font-size:16px;`则`1em`就 ...
- /etc/bashrc
[ "$PS1" = "\\s-\\v\\\$ " ] && PS1="[\[\e[34;1m\]\u@\[\e[0m\]\[\e[3 ...
- Centos7安装golang
标准官网:https://golang.org/ 需要墙 镜像官网:https://golang.google.cn/dl/ [国内推荐] 1.下载文件 # wget https://dl.googl ...