文本框的属性监测
时间:2022-05-04
本文章向大家介绍文本框的属性监测,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
之前很简单的认为对input的value监测就用2个事件可以搞定兼容性,知道我看了司徒正美的这篇博客,还是感慨自己不够深入,接触的太少。
对于IE全系列,可以采用onpropertychange属性监测
对于 gte IE9 和W3c浏览器,则通过input事件进行监测。
但是IE9的兼容性可能会出现问题。
oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)。
onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)(仅 IE 支持)。
所以可以这样实现。
input = document.getElementById('input');
if(input.addEventListener){
input.addEventListener('input',fn,false);
}else{
input.attachEvent('onpropertychange',function(e){
if(e.propertyValue == 'value'){
fn();
}
});
}
if(window.VBArray && window.addEventListener && !window.WebSocket){
input.addEventListener('keyup',function(e){
var code = e.keycode || e.charcode;
if(code==8 || code==46){
fn();
}
},false) ;
input.oncut=function(){fn()};
}
另外,如果对不仅仅对文本内容进行监听,而且要相应修改,那么对于实现input事件的浏览器而言,没什么
问题,而对于IE的propertychange事件,则应该有所注意--为了避免循环处罚该事件,需要在修改属性之前将onpropertychange
处理程序取消,属性修改完毕之后重新赋值:
下面是一个简单的强制输入大写字母的demo,来源自David Flanagan
1 function forceToUpperCase(element) {
2 if (typeof element === "string") element = document.getElementById(element);
3 element.oninput = upcase;
4 element.onpropertychange = upcaseOnPropertyChange;
5
6 // Easy case: the handler for the input event
7 function upcase(event) { this.value = this.value.toUpperCase(); }
8 // Hard case: the handler for the propertychange event
9 function upcaseOnPropertyChange(event) {
10 var e = event || window.event;
11 // If the value property changed
12 if (e.propertyName === "value") {
13 // 避免循环触发事件
14 this.onpropertychange = null;
15 // Change the value to all uppercase
16 this.value = this.value.toUpperCase();
17 // 重新添加处理函数
18 this.onpropertychange = upcaseOnPropertyChange;
19 }
20 }
21 }
- 锂离子电池发明人:自动驾驶汽车电池需要更加耐用
- Linux中MySQL5.6编译安装与MySQL5.7二进制安装步骤
- Nginx服务编译安装、日志功能、状态模块及访问认证模式实操
- 快速入门系列--WebAPI--03框架你值得拥有
- 快速入门系列--MVC--06视图
- 腾讯入局物业管理 欲改造传统服务?
- ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)
- ansible批量管理软件部署及剧本
- 快速入门系列--MVC--02路由
- Javascript生成GUID
- 快速入门系列--MVC--04模型
- 快速入门系列--MVC--03控制器和IOC应用
- ExtJs学习笔记(3)_GridPanel[XML做数据源]
- 快速入门系列--MVC--05行为
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法