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

　　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. PCI_Making Recommendations

    协作性过滤 简单理解从众多用户中先搜索出与目标用户'品味'相似的部分人,然后考察这部分人的偏爱,根据偏爱结果为用户做推荐.这个过程也成为基于用户的协作性过滤(user_based collaborat ...

  2. java用户界面——加载图片 jpg GIF

    java用户界面--加载图片 jpg GIF 代码如下: package day08; import java.awt.GridLayout; import javax.swing.Icon;impo ...

  3. docker~windows版本的安装与使用

    回到目录 在面向服务的框架里,docker扮演着十分重要的角色,他使你的部署更轻量,使运维更智能化,事实上微软自己的项目也已经用上了docker了,下面介绍一下在windows环境上使用docker的 ...

  4. 【翻译】React vs Angular: JavaScript的双向性

    翻译原文链接:https://blog.prototypr.io/react-vs-angular-two-sides-of-javascript-b850de22b413 我的翻译小站:http:/ ...

  5. DNS，TCP，IP，HTTP，socket，Servlet概念整理

    DNS,TCP,IP,HTTP,socket,Servlet概念整理   常见的协议虽然很容易理解,但是看了之后过一段时间不看还是容易忘,笔记如下,比较零碎,勉强供各位复习.如有错误欢迎指正.   D ...

  6. (转)SqlServer基础之(触发器)（清晰易懂）

    阅读目录 一:触发器的优点 二:触发器的作用 三:触发器的分类 四:触发器的工作原理 五:创建触发器 六:管理触发器 概念:   触发器(trigger)是SQL server 提供给程序员和数据分析 ...

  7. forget Alinx * quena

    生活片段linux与queena进入我的生活 今天来分享一下学习心得与在生生活当中遇到的情况!..属于基础与小白该看的的文章 ,学长们多多给建议... 学习是一个循序渐进不断坚持的一个过程,贵在坚持, ...

  8. OpenCV探索之路（二十一）如何生成能在无opencv环境下运行的exe

    我们经常遇到这样的需求:我们在VS写好的程序,需要在一个没有装opencv甚至没有装vs的电脑下运行,跑出效果.比如,你在你的电脑用opencv+vs2015写出一个程序,然后老师叫你把程序发给他,他 ...

  9. webpack命令行

    前面的话 webpack提供了命令行接口(CLI),以便对构建过程进行配置和交互.这对于制定早期原型.轮廓.编写 npm 脚本 或者一些个人自定义需求很有用.本文将详细介绍webpack的命令行接口 ...

  10. 6-最基础的服务-es6写法

    创建server.js 'use strict'; //http模块 var http = require('http'); //封装的方法 var handlers = require('./han ...