jS實現文本框在點擊時變色

網頁上默認的文本框老是灰色風格，看的都有點不耐煩了，用CSS和JS改變其樣式是大家都喜歡用的方法，今天寫了一個點擊邊框變色的文本框，鼠標點擊文本框將要輸入的時候，文本框自動變色高亮顯示，非常有視覺效果，讓文本框變漂亮了許多。HTML代碼如下：

 
                01 
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
               
                02 
                <html xmlns="http://www.w3.org/1999/xhtml"> 
               
                03 
                <head> 
               
                04 
                <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> 
               
                05 
                <title>輸入框點擊時邊框變色效果</title> 
               
                06 
                </head> 
               
                07 
                <body> 
               
                08 
                <script type="text/javascript"> 
               
                09 
                // focusClass : 獲取焦點時的樣式 
               
                10 
                // normalClass : 正常狀態下的樣式 
               
                11 
                function focusInput(focusClass, normalClass) { 
               
                12 
                    var elements = document.getElementsByTagName("input"); 
               
                13 
                    for (var i=0; i < elements.length; i++) { 
               
                14 
                        if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") { 
               
                15 
                            elements[i].onfocus = function() { this.className = focusClass; }; 
               
                16 
                            elements[i].onblur = function() { this.className = normalClass||''; }; 
               
                17 
                        } 
               
                18 
                    } 
               
                19 
                } 
               
                20 
                </script> 
               
                21 
                <script type="text/javascript"> 
               
                22 
                window.onload = function () { 
               
                23 
                    focusInput('focusInput', 'normalInput'); 
               
                24 
                } 
               
                25 
                </script> 
               
                26 
                請輸入姓名：<input type="text" class="normalInput" /> 
               
                27 
                <style type="text/css"> 
               
                28 
                .normalInput {border:1px solid #ccc;} 
               
                29 
                .focusInput {border:1px solid #FFD42C;} 
               
                30 
                </style> 
               
                31 
                </body> 
               
                32 
                </html>

在火狐下也有效，只不過火狐和chrome下，這兩款瀏覽器默認會自動會輸入框添加點擊效果，所以有時候看不清，IE下表現突出。

jS實現文本框在點擊時變色

jS實現文本框在點擊時變色

免責聲明！