原生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垃圾回收机制?

    Python的GC模块主要运用了“引用计数”(reference counting)来跟踪和回收垃圾.在引用计数的基础上,还可以通过“标记-清除”(mark and sweep)解决容器对象可能产生的 ...

  2. asp.net web开发——文件的上传和下载

    HTML部分 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...

  3. graphql-inspector graphql schema比较&&文档校验&&查找破坏性变动工具

    graphql-inspector 是一个方便的graphql 周边工具,可以加速graphql 应该的开发,同时可以帮助我们排查问题 包含以下特性: 进行schema 的比较 文档校验(通过sche ...

  4. 使用vault pki 为nginx 生成tls 证书文件

    关于vault pki 管理的使用的可以参考官方文档或者docker-vault 以下演示一个简单的基于vault pki 为nginx 提供tls 证书 项目环境配置 nginx 配置文件   wo ...

  5. Cogs 1632. 搬运工(二分图最小点覆盖)

    搬运工 ★ 输入文件:worker.in 输出文件:worker.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 小涵向小宇推荐了一款小游戏. 游戏是这样的,在一个n*n的地 ...

  6. 洛谷 P2918 [USACO08NOV]买干草Buying Hay 题解

    P2918 [USACO08NOV]买干草Buying Hay 题目描述 Farmer John is running out of supplies and needs to purchase H ...

  7. SP19997 MOON2 - Moon Safari (Hard) 【数论,多项式】

    题目描述:求 \[ \sum_{i=1}^ni^kr^i \] 对某个质数取模.\(T\)组数据. 数据范围:\(n,r\le 10^{18},\sum k\le 2.56\times 10^6\) ...

  8. 每日Android一问等你来解答-什么是Activity的生命周期?

    关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己. 本篇文章同步微信公众号 欢迎大家关注我的微信公众号:「醉翁猫咪」 什么是Activity的生命周期? 生命周期: 对于生命周期我们 ...

  9. Android Studio3.0的下载及其安装详解加eclipse下载安装配置jdk9

    关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己. 本篇文章同步微信公众号  欢迎大家关注我的微信公众号:「醉翁猫咪」 今天我们来讲解如何下载android studio 3.0及其 ...

  10. (13)Go接口

    接口(interface)定义了一个对象的行为规范,只定义规范不实现,由具体的对象来实现规范的细节. 接口 接口类型 在Go语言中接口(interface)是一种类型,一种抽象的类型. interfa ...