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

　　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. 【一步一步】Spring 源码环境搭建

    平时项目中基本上都会用到spring,但是源码还没有深入的了解过.趁这段时间稍微空闲点,开始研究下spring 源码.下面是spring 源码的环境搭建. 主要分为如下步骤: ①安装jdk,gradl ...

  2. 理解Linux文件系统之inode

    很少转发别人的文章,但是这篇写的太好了. 理解inode   作者: 阮一峰 inode是一个重要概念,是理解Unix/Linux文件系统和硬盘储存的基础. 我觉得,理解inode,不仅有助于提高系统 ...

  3. Ubuntu14.04安装有道词典

    Ubuntu14.04安装有道词典之前要更新系统: sudo apt-get update sudo apt-get upgrade sudo apt-get dist-upgrade 在有道官网下载 ...

  4. [C++]智能指针的实现与使用

    智能指针 智能指针是当我们在使用对象时,有时会把对象的内存分配在堆上忘记释放,导致内存泄露,并且当多个指针共享同一个对象的内存时,容易出现重复释放内存,导致错误. 我们针对所需要共享的对象,手动完成一 ...

  5. java多态加深

    当超类对象引用变量引用子类对象时,被引用对象的类型而不是引用变量的类型决定了调用谁的成员方法,但是这个被调用的方法必须是在超类中定义过的,也就是说被子类覆盖的方法. public class Dtai ...

  6. (转)mysql水平分表和垂直分表和数据库分区

    坚信数据库的物理设计在对高级数据库的性能影响上远比其他因素重要.给大家说一下经过专家对Oracle的研究,他们解释了为什么拙劣的物理设计是数据库停机(无论是有计划的还是没计划的)背后的主要原因.但在这 ...

  7. HDOJ2004-成绩转换

    Problem Description 输入一个百分制的成绩t,将其转换成对应的等级,具体转换规则如下:90~100为A;80~89为B;70~79为C;60~69为D;0~59为E;   Input ...

  8. Verilog HDL常用综合语法

    前面已经记录了一些组成Verilog的基本组成,可以用这些基本组成来构成表达式.这一节,就来记录一下把这些表达式构成一个文件的各种行为描述语句. ①这里用Verilog基本要素进行的行为描述主要是针对 ...

  9. 终极锁实战：单JVM锁+分布式锁

    目录 1.前言 2.单JVM锁 3.分布式锁 4.总结 =========正文分割线================= 1.前言 锁就像一把钥匙,需要加锁的代码就像一个房间.出现互斥操作的场景:多人同 ...

  10. HDU 6033 Add More Zero (数学)

    Description There is a youngster known for amateur propositions concerning several mathematical hard ...