1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
5 <title>input输入框(blur,change,focus)</title>
6 <script type="text/javascript" src="eventutil.js"></script>
7 </head>
8 <body>
9 <form action="#" method="post">
10 <input type="text" />
11 </form>
12 <script type="text/javascript" src="test02.js"></script>
13 </body>
14 </html>
1 var textbox = document.forms[0].elements[0];
2
3 EventUtil.addHandler(textbox, "focus", function(event) {
4 event = EventUtil.getEvent(event);
5 var target = EventUtil.getTarget(event);
6
7 if (target.style.backgroundColor != "red") {
8 target.style.backgroundColor = "yellow";
9 }
10 });
11
12 EventUtil.addHandler(textbox, "blur", function(event) {
13 event = EventUtil.getEvent(event);
14 var target = EventUtil.getTarget(event);
15
16 if (/[^\d]/.test(target.value)) {
17 target.style.backgroundColor = "red";
18 } else {
19 target.style.backgroundColor = "";
20 }
21 });
22
23 EventUtil.addHandler(textbox, "change", function(event) {
24 event = EventUtil.getEvent(event);
25 var target = EventUtil.getTarget(event);
26
27 if (/[^\d]/.test(target.value)) {
28 target.style.backgroundColor = "red";
29 } else {
30 target.style.backgroundColor = "";
31 }
32 });
