oninput和onpropertychange实时监听输入框值的变化
oninput和onpropertychange实时监听输入框值的变化
传统监听输入框的做法就是使用keyup
、keydown
、keypress
,或者change
事件来实现,但keyup
、keydown
、keypress
事件是只要完成击键事件后就触发,不考虑输入框的值是否变化,也监听不了使用鼠标右键[剪贴]和[粘贴]这些操作,更监听不了使用JS动态改变值的变化。而change
事件必须是焦点离开输入框后才触发,并不能实时监听。所以这几个事件来监听输入框值变化并不完美。ie浏览器(ie6-8)可以直接使用onpropertychange事件来实时监听(包括JS动态改变值),而标准浏览器(包括IE9+)可以使用HTML5薪增的oninput事件来监听,但是oninput并不能监听JS动态改变的值,网上虽然有很多方面的资料,很是很多都没有讲到监听JS动态改变值,碰巧今天同事做手机端碰到这个问题问到我,所以就总结了下!
JSFiddler效果如下:
你可以狠狠的点击这里:监听输入框值的变化
IE下onpropertychange实时监听输入框值的变化
首先我们可以做个简单的demo来测试下,代码如下:
HTML代码:
<h2>IE6-8监听输入框值的变化--onpropertychange事件,可以监听到js动态设置值</h2>
<input type="text" id="input" />
<div id="value" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
JS代码:
// 兼容IE下(IE6-8) 键盘事件 IE9不支持此事件
$("#input").bind("propertychange",function(e){
var value = $(e.target).val();
$("#value").html(value);
});
// 兼容IE下 动态改变输入框值 是否监听到?
$("#input").val("11");
onpropertychange监听的是元素的property属性,并不只局限于value,也可以监听其他标准属性值,如:input的name值,效果可以看JSfiddler上面的链接。
标准浏览器下oninput实时监听输入框值的变化
HTML代码如下:
<!-- IE9+标准浏览器 -->
<h2>标准浏览器监听输入框值的变化--oninput事件,不能监听到js动态设置值,但是可以监听到键盘事件值的变化</h2>
<input type="text" id="input2" />
<div id="value2" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
JS代码如下:
// 兼容标准浏览器 chrome firefox IE9+等 但是动态设置值并不支持
$("#input2").bind('input',function(e){
var value = $(e.target).val();
$("#value2").html(value);
});
// 兼容标准浏览器下 动态改变输入框值 是否监听到?
$("#input2").val("11");
标准浏览器下使用oninput事件也可以监听输入框值的变化,但是他和IE的onpropertychange事件有点不同:
oninput不能监听JS动态改变的属性或者值。特别是想在移动开发上使用这个事件,但是纠结的不能监听到这个事件。
使用定时器功能来监听各个浏览器输入框值的变化(包括JS动态改变值或者属性)。
HTML代码如下:
<h2>下面是对浏览器做兼容性处理,使用定时器</h2>
<input type="text" id="input3" />
<div id="value3" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
JS代码如下:
// 兼容各个浏览器下
var timer = 0,
curVal = "";
$("#input3").bind("propertychange input",function(e){
if(timer){
clearInterval(timer);
timer = 0;
}
curVal = $(e.target).val();
$("#value3").html(curVal);
interval();
}); function interval(){
timer = setInterval(function() {
if (curVal != $("#input3").val()) {
curVal = $("#input3").val();
$("#value3").html($("#input3").val());
}
}, 100);
}
interval();
// 兼容各个浏览器下 动态改变输入框值
$("#input3").val("11");
如上,使用定时器去不断检测值是否和当前值是否相等。
模拟valuechange事件变化,监听input,textarea等之前值,之后值得变化。
valuechange事件是自定义事件的,有上面的监听当前值改变,为什么还要这个事件呢?那是因为比如输入框或者文本域,我想监听输入框之前的值和现在的值得话,那么上面的方法不好监听,监听不到,所以就再次封装了下,可以实时监听input或者textarea等之前值和之后值得功能。
思路:正常的情况下还是和上面一样 用这两个事件 propertychange input 就可以监听键盘操作的事件了,但是标准浏览器对input事件,比如动态改变值得时候 监听不到,所以用了一个定时器不断的检测,如果值不相等的话,那么就执行回调函数,返回之前的值和之后的值。下面我们可以先看看jsFiddler效果吧!
你可以狠狠的点击这里: valueChange事件动态监听输入框input或者textarea之前值和现在值得变化!
下面是基本的HTML代码如下:
<h2>下面是对浏览器做兼容性处理,使用定时器</h2>
<input type="text" id="input3" />
<div id="value3" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
<div class="clickme" data-value="11">点击我1,我的值为11</div>
<div class="clickme" data-value="22">点击我2,我的值为22</div>
JS代码如下:
function valuechange(element,callback) {
var timer = 0,
prevVal = $(element).val();
timer = 0;
if(timer){
clearInterval(timer);
timer = 0;
}
timer = setInterval(function(){
if(prevVal != $(element).val()) {
if(prevVal == '') {
prevVal = undefined;
}
callback(prevVal,$(element).val());
prevVal = $(element).val();
}
},100); $(element).bind("propertychange input",function(e){
if(prevVal != $(e.target).val()) {
if(prevVal == '') {
prevVal = undefined;
}
callback(prevVal,$(e.target).val());
prevVal = $(e.target).val();
}
});
}
valuechange('#input3',function(prev,cur){
$("#value3").html("之前的值是:"+prev+"当前的值"+cur);
});
// 动态js设置值
$(".clickme").click(function(e){
var value = $(e.target).attr("data-value");
$("#input3").val(value);
});
oninput和onpropertychange实时监听输入框值的变化的更多相关文章
- javascript --- 实时监听输入框值的变化
实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...
- js与jquery实时监听输入框值的oninput与onpropertychange方法
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
- Js/jQuery实时监听输入框值变化
前言 在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能 ...
- 实时监听输入框值变化:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
- html5 实时监听输入框值变化的完美方案:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...
随机推荐
- [USACO18FEB]Slingshot
题意可化为: 在二维平面中有n个点,坐标为\((x_i,y_i)\),点权为\(t_i\). 现有m个询问,每次给定点\((x,y)\),求\(\min\{|x-x_i|+|y-y_i|+t_i,|y ...
- 【代码笔记】iOS-自定义switch
一,效果图. 二,工程图. 三,代码. ViewController.h #import <UIKit/UIKit.h> #import "CustomSwitch.h" ...
- 【读书笔记】iOS-网络-应用间通信
一,URL方案 URL方案有3个主要用途:根据设备上其他应用的存在与否调整逻辑,切换到其他应用以及响应打开你的应用的其他应用.你还可以通过URL方案从某个站点或是在基于Web的认证流程结束是打开应用. ...
- CSS 小结笔记之图标字体(IconFont)
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
- git cherry-pick 用法
1.当合并代码冲突特别多的时候,有时候只想提交自己分支的代码.这个时候使用cherry-pick 可以实现 1)首先使用 git log --oneline -n 找到最近自己分支的提交记录,n表示提 ...
- DataContract和DataMember的作用
数据契约(DataContract)里的DataMember特性 来源于网络,用于个人收集及备忘 数据契约(DataContract) 服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端 ...
- FileStream常用的属性和方法:
对流进行操作时要引用 using System.IO; 命名空间 FileStream常用的属性和方法: 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanW ...
- CSS| 實例---寬度自由調節button,圖片切換
<html lang="en"> <head> <meta charset="utf-8"/> <title>I ...
- CreateProjectFormat——初始项目目录格式
百度云链接:https://pan.baidu.com/s/1f_2YaMf9619Rt5AlC6nryQ 密码:v2cb 修改中...
- 推荐linux下的数据库开发工具DBeaver 开源免费
linux下不错的数据库管理工具 DBeaver 操作比较友好,基于eclipse.使用jdbc链接,链接数据库非常全(oracle mysql mssql sqlite 常见的统统支持).而且可以 ...