文本框(input)獲取焦點(onfocus)時樣式改變的示例代碼

 本篇文章主要是對文本框(input)獲取焦點(onfocus)時樣式改變的示例代碼進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助

摘要：許多重視用戶體驗的設計師都希望給文本框(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>