DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 文本框(input)獲取焦點(onfocus)時樣式改變的示例代碼
文本框(input)獲取焦點(onfocus)時樣式改變的示例代碼
編輯:關於JavaScript     

摘要:許多重視用戶體驗的設計師都希望給文本框(input)加上獲取焦點或者鼠標懸停時的樣式切換效果。其實很簡單,我們只需要獲取頁面上的文本框,加上onfocus事件或者其他對應的事件即可。本文介紹了如何在獲取焦點時切換樣式,明白原理後,實現其他效果就很簡單了。

許多重視用戶體驗的設計師都希望給文本框(input)加上獲取焦點或者鼠標懸停時的樣式切換效果。其實很簡單,我們只需要獲取頁面上的文本框,加上onfocus事件或者其他對應的事件即可。本文介紹了如何在獲取焦點時切換樣式,明白原理後,實現其他效果就很簡單了。
復制代碼 代碼如下:
 function focusInput(focusClass, normalClass) {
           var elements = document.getElementsByTagName("input");
              for (var i=0; i < elements.length; i++) {
                 if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
                 //if(elements[i].type=="text"){
                   elements[i].onfocus = function() { this.className = focusClass; };
                   elements[i].onblur = function() { this.className = normalClass||''; };
                }
             }
        }

        window.onload = function() {
            focusInput('focusInput', 'normalInput');
        }

復制代碼 代碼如下:
<style type="text/css">
.normalInput { border:1px solid #ccc; }
.focusInput {    border:1px solid #FFD42C; }
</style>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved