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

　　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. Java用Cookie简单限制点赞次数

    楼主最近在搞一个当下比较流行的点赞功能,这个功能也是让程序员又爱又恨啊 说起爱,点赞是个社会化的动作,全民都在为美好的事情,行为,动作,点赞. 说起恨,你很难在用户没有登录的情况下限制恶意点赞的机器人 ...

  2. 类 java.util.Scannar方法

    类 java.util.Scannar方法 ·Scannar (InputStream ln):用给定的输人流创建一个Scanner对象. ·String nextLlne():读取输入的下一行内容. ...

  3. JQueryEasyUI学习简单Demo

    一.Layout布局 声明:此文档参考了jQuery EasyUI官方文档 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽其边框改 ...

  4. CONSOLE_SCREEN_BUFFER_INFO 结构体

    CONSOLE_SCREEN_BUFFER_INFO结构体 来源:https://msdn.microsoft.com/en-us/library/ms682093(v=vs.85).aspx 作用 ...

  5. 【D3】D3学习轨迹-----学习到一定层度了再更新

    1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p ...

  6. C# 对xml进行操作

    一:xml的基本操作 (1)获得xml文件中的数据 //创建xml文档对象 XmlDocument xmlDoc = new XmlDocument(); //将指定xml文件加载xml文档对象上 x ...

  7. webIDE 第二篇博文

    这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的 ...

  8. 37. leetcode 108. Convert Sorted Array to Binary Search Tree

    108. Convert Sorted Array to Binary Search Tree 思路:利用一个有序数组构建一个平衡二叉排序树.直接递归构建,取中间的元素为根节点,然后分别构建左子树和右 ...

  9. vscode--搭建自动编译sass环境

    一,安装插件及使用步骤 1.vscode安装Live Sass Compiler,由于该插件依赖Live Server ,所以会自动安装Live Server 2.点击vscode底部的Watch m ...

  10. 为Tornado框架加上基于Redis或Memcached的session 【第三方】

    Tornado 没有session,只有cookie_secret,这在一些情况下是不利于开发的.所有我们可以给Tornado加上session的功能. 这篇文章讲解的是依靠第三方包来实现.以后的文章 ...