假設(shè)有一個(gè)文本框，我們只允許用戶(hù)輸入數(shù)值。為此，我們希望:
1.利用focus事件修改文本框內(nèi)容，
2.利用blur事件回復(fù)文本框的內(nèi)容,
3.利用change事件在用戶(hù)輸入了非數(shù)值字符時(shí)再次修改背景顏色。

var EventUtil = {addHandler: function(element, type, handler) { // 跨瀏覽器的添加事件方法if ( element.addEventListener) { // DOM2級(jí)事件處理程序element.addEventListener(type, handler, false); // 第3個(gè)參數(shù)表示在冒泡階段添加} else if (element.attachEvent) { // IE事件處理程序element.attachEvent("on" + type, handler);} else { // DOM0級(jí)事件處理程序element["on" + type] = handler;}},getEvent: function(event) { // 兼容獲取事件return event ? event : window.event;},getTarget: function(event) { // 兼容獲取目標(biāo)return event.target || event.srcElement;} }; // 利用上面的方法開(kāi)始實(shí)現(xiàn)文本描述的功能 var textbox = document.forms[0].elements[0]; // 得到第一個(gè)表單的第一個(gè)元素(一般是Input)EventUtil.addHandler(textbox, "focus" , function(event) { // 添加焦點(diǎn)事件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高級(jí)程序設(shè)計(jì)》(第三版) P418
ps:純手打，出錯(cuò)私信我

總結(jié)

以上是生活随笔為你收集整理的JavaScript --- 表单focus,blur,change事件的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。