文本框(input)獲取焦點(onfocus)時樣式改變的示例代碼
更新時間：2014年01月10日 09:28:52 作者：
本篇文章主要是對文本框(input)獲取焦點(onfocus)時樣式改變的示例代碼進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
摘要：許多重視用戶體驗的設計師都希望給文本框(input)加上獲取焦點或者鼠標懸停時的樣式切換效果。其實很簡單，我們只需要獲取頁面上的文本框，加上onfocus事件或者其他對應的事件即可。本文介紹了如何在獲取焦點時切換樣式，明白原理后，實現(xiàn)其他效果就很簡單了。
許多重視用戶體驗的設計師都希望給文本框(input)加上獲取焦點或者鼠標懸停時的樣式切換效果。其實很簡單，我們只需要獲取頁面上的文本框，加上onfocus事件或者其他對應的事件即可。本文介紹了如何在獲取焦點時切換樣式，明白原理后，實現(xiàn)其他效果就很簡單了。
復制代碼 代碼如下:
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>
相關文章
javascript數(shù)據(jù)結構與算法之檢索算法
查找數(shù)據(jù)有2種方式，順序查找和二分查找。順序查找適用于元素隨機排列的列表。二分查找適用于元素已排序的列表。二分查找效率更高，但是必須是已經(jīng)排好序的列表元素集合2015-04-04
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)移動端輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
js類型轉(zhuǎn)換與引用類型詳解(Boolean_Number_String)
本篇文章主要是對js中的類型轉(zhuǎn)換與引用類型(Boolean_Number_String)進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了JS錨點的設置與使用方法,涉及javascript針對頁面元素屬性的簡單動態(tài)操作技巧,需要的朋友可以參考下2016-09-09
本文主要講訴了使用js實現(xiàn)網(wǎng)站功能兼容IE6，非常的實用的小技巧，有需要的朋友可以參考下2014-09-09
JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組的實現(xiàn)示例
這篇文章主要介紹了JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動態(tài)設置元素css的代碼。需要的朋友可以參考下。2011-08-08
JavaScript實現(xiàn)簡單獲取本地圖片主色調(diào)
想象一個場景，就是如何根據(jù)一張圖片大概提取出它的主色調(diào)呢？獲取主色調(diào)后，可能會用來設置某些背景顏色，這里，利用?JS?簡單獲取本地圖片主色調(diào)，希望對大家有所幫助2023-03-03
使用requestAnimationFrame實現(xiàn)精準倒計時功能
實現(xiàn)精準倒計時對于活動預告、限時優(yōu)惠和賽事計時等場景非常重要,常用的倒計時方法包括使用JavaScript的setInterval和setTimeout,但這些方法精度有限,為提高精度,本文介紹使用requestAnimationFrame實現(xiàn)精準倒計時功能,感興趣的朋友一起看看吧2024-09-09
微信小程序分享小程序碼的生成（帶參數(shù)）以及參數(shù)的獲取
這篇文章主要介紹了微信小程序分享小程序碼的生成（帶參數(shù)）以及參數(shù)的獲取，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03