文本框的onchange事件，如何兼容各大浏览器
在项目中经常会遇到对用户输入的数据进行实时校验，而不是等文本框失去焦点或用户手动点击校验。
首先分析下在哪些情况下文本框会产生change事件。
1、用户通过键盘入正常字符时；
2、用户通过键盘输入非正常字符时 ctrl+v ctrl+x ctrl+z delete Backspace 等操作时；
3、用户通过鼠标进行粘贴、剪切、撤消等操作时；
<body>
<input id="text1" type="text"/>
<div id="info1"></div>
<script type="text/javascript">
var text1 = $("#text1");
//input基本满足，但不能完全支持IE
text1.bind("input", function () {
console.clear();
console.log("input", $(this).val());
});
//有input就够了，propertychange好像没什么效果
text1.bind("propertychange", function () {
console.clear();
console.log("propertychange",$(this).val());
});
//只能捕获键盘事件
text1.bind("keyup", function () {
console.clear();
console.log("keypress", $(this).val());
});
</script>
</body>
现在针对<input>文本框的onchange相关的事件，主要有以下几个事件，分析他们对以上情况是否能捕获
onchange：文本框好像没有该事件，只有下拉框才有。
不足：不支持文本框
oninput：文本框值改变时触发，以上三种情况都满足。
不足：但是在IE9及以下时，只有捕获输入可见字符，但在文本框中进行delete Backspace ctrl+x等操作时无法进行捕获；
onpropertychange：
onkeypress：在文本框中按下键盘的事件，细分可分为onkeydown和onkeyup事件。
不足：这个好像是否捕获用户输入的事件，但用户如果通过鼠标右击粘贴，则无法捕获。
以下是针对IE不能正常捕获change事件，作出的监听方法。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<script src="../js/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
//文本框change事件。
//兼容IE9 chrome、firefox
//解决IE9下 按delete、Backspace、ctrl+x 改变文本内容时不能触发change事件
function test() {
$("#li1").select().focus();
}
//输出值
function check(p_obj) {
console.log($(p_obj).val());
}
$(function () {
if ($.browser.msie) {
var flag = true;
$("#text1").keydown(function (event) {
if ($(this).val() == "") {
flag = false;
} else {
flag = true;
}
});
$("#text1").keyup(function (event) {
var keycode = event.which;
//解决IE兼容 监听ctrl+x ctrl+y ctrl+z 事件对文本值的改变 强制check
if (event.ctrlKey && (keycode == 88 || keycode == 89 || keycode == 90)) {
check($(this)[0]);
return;
}
//解决IE兼容 临听 delete backspace对文本框删除操作 强制check
if ((keycode == 8 || keycode == 46 || keycode == 46) && flag) {
check($(this)[0]);
}
});
//禁用文本框的右键，防止用户通鼠标右击菜单进行粘贴、剪切操作
$("#text1").bind("contextmenu", function (e) {
return false;
});
}
});
</script>
</head>
<body>
<input id="text1" oninput="check(this)"/>
</body>
</html>
文本框的onchange事件，如何兼容各大浏览器的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...
- 关于下拉框的onchange事件和onclick选择value值。
下拉框的onchange事件和onclick,一般最好都选择onchange事件,onclick可能会不兼容有些浏览器. 下面是代码: <!DOCTYPE html><html la ...
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- Jquery文本框值改变事件兼容性
Jquery文本框值改变事件(支持火狐.ie) Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...
- JQuery初始加载时注册文本框失去焦点事件
在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });
- IE浏览器的脚本文本框监听事件
一.IE8的文本框监听事件 由于在IE8所以input和propertychange都不能用,终于皇天不负有心人让我找到了这个:https://github.com/sophiebits/jquery ...
- js监听用户的键盘敲击事件，兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- JavaScript 兼容各大浏览器阻止冒泡事件
JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...
随机推荐
- Sails 自定义 model 方法
Sails 自定义 model 方法 在 Sails 中 model 提供了一些原生的静态方法,如 .create(), .update(), .destroy(), .find(), 等. 在实际业 ...
- [LintCode]perfect-squares（DP）
题目链接:http://www.lintcode.com/zh-cn/problem/perfect-squares/ 就是求最小价值的完全背包,初始化dp[i]=i,假设全是1的时候是最多的,之后就 ...
- Codeforces Round #215 (Div. 1) B
出来冒个泡 由于数比较大 开了map计数 然后边走边删边加 勉强可过 #include <iostream> #include<cstdio> #include<cs ...
- JS 点击事件学习总结
废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...
- UVa 1442 (线性扫描) Cave
对于一个水坑,水平面肯定是相等的.(废话,不然为什么叫水ping面) 因为水面不能碰到天花板,所以将水面向两边延伸要么碰到墙壁要么延伸到洞穴外面去. 设h(i)表示向左延伸不会碰到天花板的最高水平面, ...
- 09day1
词编码 模拟 [问题描述] 一个发送机可以通过一条隧道发送一些以二进制代码组成的单词.在其尽头的接受机可以使用特殊技术恢复到最初的单词.每个单词最初都由0和1组成.所有的单词最初长度都为n(4< ...
- Maven的功用所引发的哲学思想
我们知道Maven有三个仓库 本地仓库 ~/.m2/repository/ 每一个用户也可以拥有一个本地仓库 远程仓库 中央仓库:Maven默认的远程仓库 http://repo1.maven.org ...
- JavaScript对象 + Browser 对象 + HTML DOM 对象
JavaScript 对象 Array Boolean Date Math Number String RegExp Global Browser 对象 Window Navigator Screen ...
- 一起学CUDA(零)
1.Nvidia为什么引入CUDA最近实验室已经有不少豪在入手本本了,因为学霸居多,所以大家一般都会说对显卡要求不高,不玩大型游戏,只是CPU不能差,Intel I7.3G的主频…… 其 实现在CPU ...
- IOS设计模式之四（备忘录模式，命令模式）
本文原文请见:http://www.raywenderlich.com/46988/ios-design-patterns. 由 @krq_tiger(http://weibo.com/xmuzyq) ...