input输入框(blur,change,focus) 

 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 });
posted @ 2012-06-03 15:44  小猩猩君  阅读(4037)  评论(0)    收藏  举报