原生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值发生改变

 <input type="text" id="inputs" value="2222">

$("#inputs").bind('input propertychange',function(e){
console.log($(this).val())
})

用的bind,当遇到追加的新input标签时,则不能监听了,可以使用live替代

$('input').live('input propertychange', function()
{
//获取input 元素,并实时监听用户输入
//逻辑
})

原生js监听input值发生变化的更多相关文章

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

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

  2. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  3. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  4. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)

    转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

  5. 原生Js监听普通dom尺寸变化

    原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 ...

  6. js监听input输入框值的实时变化实例

    情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...

  7. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  8. 监听INPUT值的即时变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jq 监听input值的变化

    $(".popWeiXing .name").bind("input propertychange", function() { modValue.diyDat ...

随机推荐

  1. python操作json文件获取内容

    写case时,将case 写到json文件比写到,写python一定要学会处理json 以下,是要处理的json 处理操作包括:打开json文件,获取json文件内容,关闭json文件,读取内容中的对 ...

  2. learning java 处理流的用法

    有点重定向使用的味道 import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.Pri ...

  3. 洛谷 P2563 [AHOI2001]质数和分解 题解

    P2563 [AHOI2001]质数和分解 题目描述 任何大于 1 的自然数 n 都可以写成若干个大于等于 2 且小于等于 n 的质数之和表达式(包括只有一个数构成的和表达式的情况),并且可能有不止一 ...

  4. 2019SDSC夏令营游记

    Day 1 2019.7.22 晴 第一天夏令营,是在一所大学举办的. 到之前的我好兴奋,要提前看一下大学到底是什么样的. 聊了一上午的天 坐了一上午的公交终于到了目的地,下午很自由,自己在宿舍里面休 ...

  5. 54、Spark Streaming:DStream的transformation操作概览

    一. transformation操作概览 Transformation Meaning map 对传入的每个元素,返回一个新的元素 flatMap 对传入的每个元素,返回一个或多个元素 filter ...

  6. SpringBoot中Example的动态条件查询

    一.无匹配器的情况: Person person = new Person(); person.setName("test"); Role role = new Role(); r ...

  7. 【UVA11134】传说中的车

    横纵坐标互不影响,所以问题转化到一维:在n个区间中每个区间选一个数,n个数都被选一次 将区间按右端点排序,枚举区间,每个区间选最靠左的没被选过的点 #include<algorithm> ...

  8. OPPO-Java面试-社招-一面(2019/07)

    个人情况 2017年毕业,普通本科,计算机科学与技术专业,毕业后在一个二三线小城市从事Java开发,2年Java开发经验.做过分布式开发,没有高并发的处理经验,平时做To G的项目居多.写下面经是希望 ...

  9. vim配置无插件

    其实,vim插件会影响编辑器的启动速度,虽然有些插件影响不大,我依然觉得不够,其实通过简易的状态栏,可以显示必要的信息,能自定义颜色和背景甚至透明就足够了. 一.自定义状态栏其实以下内容可以写在一行上 ...

  10. Swarm容器集群管理(超详细)

    一.Swarm介绍 Swarm是Docker公司自研发的容器集群管理系统, Swarm在早期是作为一个独立服务存在, 在Docker Engine v1.12中集成了Swarm的集群管理和编排功能.可 ...