onpropertychange 实时监控input输入框事件实现

在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,可以使用onchange、onblur 事件,但是要失去焦点时才能触发事件,这里介绍onpropertychange实现动态监听input值

1.IE浏览器

$id = $("#id");
$id.onpropertychange = function() {    

    //expression

};

2.非IE浏览器下,需要用addEventListener来注册事件

if (window.addEventListener) {
        document.getElementById("id").addEventListener("input", function() {

           //expression

        }, false);
}

3.JQ实现

$("#id").bind("input propertychange", function() {

    //expression

 });
时间: 2024-10-28 11:05:22

onpropertychange 实时监控input输入框事件实现的相关文章

oninput和onpropertychange实时监听输入框值的变化

传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydown.keypress事件是只要完成击键事件后就触发,不考虑输入框的值是否变化,也监听不了使用鼠标右键[剪贴]和[粘贴]这些操作,更监听不了使用JS动态改变值的变化.而change事件必须是焦点离开输入框后才触发,并不能实时监听.所以这几个事件来监听输入框值变化并不完美.ie浏览器(ie6-8)可以直接使用onpropertychange事件来实时监听(包括JS动态改变值

移动端(html5)微信公众号下用keyup实时监控input值的变化无效

搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公众平台开发时,客户提需求“输入框中输入内容时,输入框后边显示清除按钮,清除输入框中的内容”,使用“keyup”事件时在中文输入法下部分按键keyup事件无效, 方法一:主要是给搜索框注册focus事件,隔个时间去检索下,贴出代码 <script language="javascript&quo

实时监控input输入值变化

在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦.这时候我们需要更专业的解决方案:HTML5标准事件oninput.onchange和IE专属的事件properchange. 1.oninput&onchange: oninput和onchange都是事件对象,当输入框的值发生改变时触发该事件.不同的是,oninput是在值改变时立即触发,而on

实时获取input输入框中的值

//输入框正在输入时 $("#ipt").on('input',function(){ if(!($('#ipt').val()=='')){ $(".cancle_ico").removeClass('hide'); }else{ $(".cancle_ico").addClass('hide'); } }) //输入框得到焦点时 $("#ipt").on('focus',function(){ if(!($('#ipt')

jquery监控input输入框的变化

(function($) { $.fn.watch = function(callback) { return this.each(function() { //缓存以前的值 $.data(this, 'originVal', $(this).val()); //event $(this).on('keyup paste', function() { var originVal = $(this, 'originVal'); var currentVal = $(this).val(); if

时时监控input的变化

移动端(html5)微信公众号下用keyup实时监控input值的变化无效 2014-10-17 14:51 16738人阅读 评论(1) 收藏 举报  分类: html5(30)  javascript(84)  版权声明:本文为博主原创文章,未经博主允许不得转载. 搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公众平台开发时,客户提需求"输入

同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴

实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象的属性改变(由键盘或鼠标触发)且对象失去焦点 3.onpropertychange 当前对象属性改变就会触发 缺陷:只支持低版本IE 4.oninput 和onpropertychange类似,当前对象属性改变就会触发

js/jquery 实时监听输入框值变化的完美方案:oninput &amp; onpropertychange

本文转载于 http://blog.163.com/lgh_2002/blog/static/44017526201341511112874/ Jquery绑定事件(bind和live的区别) js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange 2013-05-15 11:01:12|  分类: jquery/javascrip |

实时监测input控件value值动态变化的事件

目录 [1]input [2]propertychange [3]兼容处理 前面的话 HTML5为input控件新增了很多type属性,大大增加了input控件的应用场景.其中一个是type="range"的input控件,可以通过拖动游标改变value值,但并不是所有浏览器都可以实时显示,除了IE10+浏览器 说到改变value值的事件,首先想到的便是change事件,但change事件的触发条件是失去焦点并且value值改变.而游标拖动并没有失去焦点.所以,change事件并不能达