原生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. GSM/GPRS模块 AT指令集C语言编程——基于有方M660+和MSP430单片机

    GSM/GPRS芯片是手机中负责收发短信.拨打电话以及访问GPRS网络的核心器件.有方M660+为深圳有方公司生产的一款超小封装的GSM/GPRS工业无线模块,可以提供高品质的语音.短信.数据业务等功 ...

  2. AtCoder Beginner Contest 129 解题报告

    传送门 写了四个题就跑去打球了.第五题应该能肝出来的. A - Airplane #include <bits/stdc++.h> using namespace std; inline ...

  3. JavaScript基础07——BOM

    BOM概念   BOM是Browser Object Model的缩写,简称浏览器对象模型.这个对象就是window         BOM提供了独立于内容而与浏览器窗口进行交互的对象         ...

  4. 用OKR提升员工的执行力

    很多管理者在公司管控的过程中常常出现一种乏力的感觉,觉得很多事情推进不下去,结果总是令人不满意.管理者总是会吐槽,“员工执行力差!”而此时大部分管理者会认为公司执行力差是员工能力和态度的问题. 事实上 ...

  5. learning svn diff --summarize

    # svn diff --summarizeA armbian-custom-dc/test/4g-power.shA armbian-custom-dc/test/4g-reset.shM armb ...

  6. leetcode 一些算法题及答案

    1. 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这 ...

  7. Web前端鼠标悬停实现显示与隐藏效果

    css定义,偏移量,相对定位,绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位,就是定义网页标签在运行时显示的位置 css提供Position ...

  8. C博客作业01--分支丶顺序结构

    1.本章学习总结 1.1学习内容总结 分支结构 if else-if语句与switch语句都具有选择判断的功能,但是在使用时又有所区别,按题目的不同要求与题意选择不同语句. if else-if语句表 ...

  9. 【洛谷】P1443 马的遍历

    题目:https://www.luogu.org/problemnew/show/P1443 简单的BFS模板题——因为我写出来了. 分析过程: n*m矩阵,用二维数组 数据不大,二维数组稳了 先把二 ...

  10. 卷积神经网络CNN学习笔记

    CNN的基本结构包括两层: 特征提取层:每个神经元的输入与前一层的局部接受域相连,并提取该局部的特征.一旦该局部特征被提取后,它与其它特征间的位置关系也随之确定下来: 特征映射层:网络的每个计算层由多 ...