假設有一個文本框，我們只允許用戶輸入數值。為此，我們希望:
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事件的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。