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

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

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

.代碼

5. 輸入框點擊時邊框變色效果
8. <script type="text/javascript">
9. // 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. 請輸入姓名：

29. 在Firefox下也有效，只不過Firefox和chrome下，這兩款瀏覽器預設會自動會輸入框添加點擊效果，所以有時候看不清，IE下表現突出。前端架構樣本