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