JavaScript --- 表单focus,blur,change事件的实现

假设有一个文本框，我们只允许用户输入数值。为此，我们希望:
1.利用focus事件修改文本框内容，
2.利用blur事件回复文本框的内容,
3.利用change事件在用户输入了非数值字符时再次修改背景颜色。

var EventUtil = {addHandler: function(element, type, handler) { // 跨浏览器的添加事件方法if ( element.addEventListener) {  // DOM2级事件处理程序element.addEventListener(type, handler, false); // 第3个参数表示在冒泡阶段添加} else if (element.attachEvent) {   // IE事件处理程序element.attachEvent("on" + type, handler);} else { // DOM0级事件处理程序element["on" + type] = handler;}},getEvent: function(event) { // 兼容获取事件return event ? event : window.event;},getTarget: function(event) { // 兼容获取目标return event.target || event.srcElement;}
};

// 利用上面的方法开始实现文本描述的功能
var textbox = document.forms[0].elements[0];  // 得到第一个表单的第一个元素(一般是Input)EventUtil.addHandler(textbox, "focus" , function(event) {  // 添加焦点事件event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (target.style.backgroundColor != "red"){target.style.backgroundColor = "yellow";}
});EventUtil.addHandler(textbox, "blur", function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (/[^\d]/.test(target.value)){  // 非字符target.style.backgroundColor = "red";} else {target.style.backgroundColor = "";}
});EventUtil.addHandler(textbox, "change", function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (/[^\d]/.test(target.value)){target.style.backgroundColor = "red";} esle {target.style.backgroundColor = "";}
});

摘自《JavaScript高级程序设计》(第三版) P418
ps:纯手打，出错私信我

JavaScript --- 表单focus,blur,change事件的实现相关推荐

JavaScript表单事件获取焦点：focus 失去焦点：blur 输入事件：input 变化事件：change
JavaScript表单事件焦点处理焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型.所谓焦点,就是激活表单字段,使其可以响应键盘事件. 获取焦点:focus 当单击或使用Ta ...
JavaScript基础知识总结 17：JavaScript表单脚本
目录一.表单基础二.提交表单三.表单字段的公共属性.方法.事件 1.表单字段的公共属性 2.表单字段的公共方法 3.表单字段的公共事件四.输入过滤,屏蔽字符五.剪切板事件六.自动切换七. ...
javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
JavaScript 表单专题
JavaScript 表单专题访问表单的方式访问form表单控件的方式 Form 表单对象 Form 对象集合 Form 对象属性 Form 对象方法 Form 对象事件句柄单行文本框 Text ...
html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
javascript表单处理相关的知识总结（一）
在HTML中,表单是由元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,它拥有HTML元素具有的默 ...
15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
15个非常实用的JavaScript表单验证库
来源:web前端开发 https://mp.weixin.qq.com/s/p9s9cmAt2MZeCgmD2LC5Sg 客户端验证在任何项目都是不可缺少的,很多时候我们需要在用户提交到服务器之前给予 ...
html自动验证邮件地址格式,JavaScript表单验证和邮箱格式验证的方法
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...

JavaScript --- 表单focus,blur,change事件的实现

JavaScript --- 表单focus,blur,change事件的实现相关推荐

最新文章

热门文章