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

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

代碼如下:

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com