某人需要在时间控件给文本框赋值时，触发事件函数。实现的效果：

　　1、文本框支持手工输入，通过用户输入修改值，手工输入结束后触发事件。阻塞在于失去焦点后才触发（输入过程中不触发事件）

　　2、通过JS方法修改值，修改后触发事件。重点阻塞在于此（JS赋值要触发）

　　

　　最终采用方案：

　　1、IE（IE8及以下）下使用onpropertychange实现JS赋值后触发事件

　　2、需求是手工输入结束后才触发事件，避免在文本框实时输入文字的时候也因为onpropertychange触发事件，在trigger之前判断当前焦点位置。这样onpropertychange就对手工输入无效；

　　3、实现手工输入结束后要触发事件，使用onchange事件

　　1、其他浏览器中也可以使用onchange模拟输入结束后触发事件，但是没法使用onpropertychange事件。使用定时器模拟效果

　　

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"; content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.9.1.min.js" charset="utf-8"></script>
<script>
function init(){
    //每次点击给不一样的值
    var i=0;
    $("#testchange").on("click",function(){
        $("#name").val(i);
        i++;
    });
    var jsDate = "";

    if(document.all){//ie8及以下
        $("#name").on("change",function(){
            console.log(i);//改变值后要触发的代码
        });

        $('input[type="text"]').each(function() {
            var that=this;
            if(this.attachEvent) {
                this.attachEvent('onpropertychange',function(e) {
                    if($("#name").is(":focus")) return;
                    if(e.propertyName!='value') return;
                    debugger;
                    $(that).trigger('change');
                });
            }
        })
    } else {//非ie和IE9以上
        var intervalName;
        intervalName = setInterval(handle,100);
        function handle(){
            if($("#name").val() != jsDate && !$("#name").is(":focus")){//模拟失去焦点后时才会触发
                jsDate = $("#name").val();
                console.log(i + " oninput");//改变值后要触发的代码
            }
        };
    }
}
</script>
</head>
<body onload ="init();">
    <button id="testchange">JS赋值</button>
    <label>文本框：</label><input type="text" id="name"/>
</body>
</html>

总结对比在input标签中onchange、oninput、onpropertychange对比

onchange：老东西，基本兼容所有浏览器。实现原理为元素得到焦点后开始监听Value，元素失去焦点后对比前后的Value，前后Value不相等时触发。

　　　　　　适用场景为：输入内容失去焦点后，才触发事件的场景

　　　　　　注：在查资料的过程中看到有的地方说onchange在非IE8以下的浏览器中会实时监听文本变化，但是我在实际测试中发现并没有实时监听，此处有问题货错误还请指教 :-D

　　　　　　　　或者是Jquery的锅？ 我测试的代码为  $("#id").on("change",function());

oninput：html5的标准标签。实现机制为实时监听文本框变化，有变化就触发事件，这个效果在用中文输入法时很奇怪，具体的以后有时间研究。

　　　　　　适用场景为：文本框输入过程中实时监听输入内容，触发事件

onpropertychange：IE中元素特有的属性，直接在底层监听元素的属性变化（不止是Value），任何变化都会触发事件，包括适用JS操作

　　　　　　适用场景为：页面运行期间实时监听元素属性变化，触发事件，特别适用于在IE中JS操作触发事件的场景

后记：项目原需求的实现其实最好是在控件里面更改，这里做了个奇怪的东西~  权当学习

参考：

change,propertychange,input事件小议

http://www.cnblogs.com/AndyWithPassion/archive/2011/12/18/change_propertychange_input.html

javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

http://www.jb51.net/article/25275.htm

总结oninput、onchange与onpropertychange事件的用法和区别

http://blog.csdn.net/freshlover/article/details/39050609

实时监听输入框值变化的完美方案：oninput & onpropertychange

http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html

【整合】input标签JS改变Value事件处理方法的更多相关文章

  1. input标签内容改变的触发事件

    ---恢复内容开始--- 1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onpropertychang ...

  2. input标签内容改变触发的事件

    原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data ...

  3. input标签内容改变时触发事件

    1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发: onpropertychange事件是实时触发,每增加 ...

  4. 关于input标签无法对齐的解决方法！

    在布局中发现各个input之间很难对齐,解决方法如下: 将input设置vertical-align属性: vertical-align:middle vertical-align:top verti ...

  5. js无法监听input中js改变值的变化

    $(input).on('change',function(){ }) 当使用$(input).val('...');不会触发它的change事件 解决办法一:在改变它的值后,手动触发input的ch ...

  6. 关于 html input标签的几个常用操作

    1.清除 input 标签默认样式 input { -moz-appearance: none; outline: 0; text-decoration: none; outline: none; b ...

  7. 禁止火狐浏览器缓存input标签方法

    禁止火狐浏览器缓存input标签方法 问题1:在火狐浏览器里,云平台的输入框.选项框.勾选框…填写之后按F5刷新页面,之前填的东西会保留着,其它浏览器不会火狐强制刷新用Ctrl + F5 浏览器自动保 ...

  8. 在HTML中改变input标签中的内容

    在HTML中改变input标签的内容 1.使用js自带的方法: document.getElementById('roadName').value='武汉路';//通过标签选择器来选择标签,然后设置值 ...

  9. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

随机推荐

  1. 关于delete使用limit的一些注意事项

    在使用delete删除记录时,如果表里面存在多条相同的记录,但是此刻你只想删除一条记录,那么limit就派上了用场.但是使用limit的时候得注意: 如图,您如果想着删除第一个名字叫做张三的,如果你这 ...

  2. 移动端em与rem区别

    rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕. rem是根据html根节点来计算的,而em是继承父元素的字体.比如下面一个demo <!doctype html> ...

  3. Linux Redis 重启数据丢失解决方案，Linux重启后Redis数据丢失解决方

    Linux Redis 重启数据丢失解决方案,Linux重启后Redis数据丢失解决方案 >>>>>>>>>>>>>> ...

  4. 1010: [HNOI2008]玩具装箱toy [dp][斜率优化]

    Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1... ...

  5. luogu P3398 仓鼠找sugar [LCA]

    题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而他的基友同时要从他的卧室(c) ...

  6. android 7.0 多渠道打包 - 美团开源工具Walle 命令行打包

    在Android 7.0(Nougat)推出了新的应用签名方案APK Signature Scheme v2后,之前快速生成渠道包的方式(美团Android自动化之旅-生成渠道包)已经行不通了,对此美 ...

  7. serv-u 多域配置

    serv-U后,默认情况下可以通过在浏览器中输入http://IP 的方式登录到serv-u ftp 服务器控制台,也就是说serv-u在80端口监听,这样,如果想配置多个域或者是想在自己电脑上安装A ...

  8. Spring定时器实现(一)

    Spring定时器简单应用实现,如下: 首先.Spring配置文件: <?xml version="1.0" encoding="UTF-8"?> ...

  9. 如何更换git托管

    有时候会遇到需要更换代码托管平台,从github,gitlab或者Bitbucket迁移到其它平台,过程中可能遇到不少问题,本文从是否保留历史提交记录两种需求出发,介绍一下基于git托管平台的迁移方法 ...

  10. （转）FastJson---高性能JSON开发包

    场景:javaBean对象转化为json对象! 1 Fastjson介绍 Fastjson是一个Java语言编写的JSON处理器,由阿里巴巴公司开发.1.遵循http://json.org标准,为其官 ...