某人需要在时间控件给文本框赋值时，触发事件函数。实现的效果：
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
分享到：
相关推荐
JavaScript事件处理程序的编写方式可以是自定义函数，也可以是内置函数，或者直接写入JavaScript代码。理解并熟练应用这些事件是创建交互式网页的关键，它们为用户提供了一种与网页进行沟通的方式，提高了用户体验。
1. **CSS样式**：通过CSS，我们可以改变`<input>`标签的样式，如边框、背景色、字体、大小、内边距等。例如： ```css input { border: 1px solid #ccc; padding: 5px; font-size: 14px; border-radius: 5px; } `...
通过JavaScript正则表达式，可以拦截input标签中的键盘事件，并将不符合要求的字符过滤掉。例如，使用正则表达式`/\D+/g`可以匹配所有的非数字字符，并将其替换为空字符串，从而实现只允许输入数字的效果。代码示例...
在Web开发中，jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和Ajax交互。Struts2是一个流行的Java Web框架，用于构建MVC（Model-View-Controller）架构的应用程序。将jQuery与Struts2整合...
三、JavaScript事件处理 JavaScript主要负责监听滑动条的改变事件，并根据滑动条的位置执行相应的操作。我们可以使用`addEventListener`方法来添加事件监听器： ```javascript const slider = document....
本示例“JS方法全写的表单验证”提供了一个全面的JavaScript实现，用于对常见表单字段进行验证。下面我们将深入探讨这个主题，以及如何利用JavaScript进行表单验证。 首先，表单验证可以分为前端验证和后端验证。...
SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。 [编辑本段]SWFUpload...
此外，JavaScript还提供了其他方法来处理链接，比如通过`querySelector`和`querySelectorAll`获取特定链接，或者使用`createAttribute`和`setAttributeNode`来设置属性。了解这些方法有助于在实际项目中更灵活地操作...
4. **配置Spring:** 如果你的项目已经使用了Spring框架，你需要将DWR的配置整合到Spring的配置文件中，例如通过`<bean>`标签创建DWR的相关bean。 5. **生成JavaScript接口:** DWR会自动生成JavaScript库，使得...
在前端，我们可以使用JavaScript库如Stomp.js和SockJS.js来建立WebSocket连接并发送/接收消息。以下是一个简单的示例： ```html <!DOCTYPE html> ...
- 实验中涉及了根据用户选择（性别）动态显示不同输入项的功能，这需要使用到JavaScript事件处理和DOM操作。 - `getElementById()`函数用于获取HTML文档中具有特定ID的元素，然后可以通过`.style.display`属性来...
$editor->Value = $input_value; $FCKeditor = $editor->CreateHtml(); $smarty->assign('FCKeditor', $FCKeditor); } 修改为： /** * 生成编辑器 * @param string input_name 输入框名称 * @...
为了实时更新剩余字数，我们需要监听文本域的`input`事件，这样每次用户输入或删除文字时都会触发。可以使用`addEventListener`来添加事件监听器： ```javascript textarea.addEventListener('input', function()...
var selectedDate = dateInput.value; console.log(selectedDate); ``` 如果“fewernof”代表某种库或框架，那么它可能提供了一些额外的功能，如自定义样式、更复杂的交互或者错误处理。然而，由于没有具体的文件名...
调用`translate`方法，传入这些参数，然后处理返回的结果： ```javascript async function translateText(text, sourceLang, targetLang) { try { const result = await client.translate([text], sourceLang, ...
5. **事件处理**：当用户选择新颜色时，颜色拾取器会触发一个事件，通常为`change`事件。开发者可以通过监听这个事件来获取当前颜色值，并更新相关元素的样式。 6. **颜色值的获取与设置**：`jscolor`库提供了方法...
在探讨“javascript禁用button 10秒钟”的技术细节前，我们先理解这一需求的核心——在用户界面上，为了防止用户连续点击按钮导致不必要的请求或操作，或是为了确保用户有足够的时间阅读某些重要信息（如服务条款）...
jQuery作为一个轻量级的JavaScript库，简化了DOM操作，动画效果，事件处理以及Ajax交互，使得编写复杂的表单验证代码变得更加简洁。 这个案例中，我们可能会看到以下关键知识点： 1. **jQuery选择器**：jQuery提供...
jQuery是一个高效、简洁且易用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。通过使用jQuery，开发者可以减少代码量，提高代码的可读性和可维护性。 jColor.js插件的核心功能是提供一个...
<script src="<s:url value="/fckeditor/fckeditor.js"/>" type="text/javascript"> <script type="text/javascript"> window.onload = function() { var oFCKeditor = new FCKeditor( 'editor' ) ; oFCKeditor....