文本框(input)獲取焦點(diǎn)時(shí)改變樣式

來源： | 時(shí)間：2014/6/13 9:35:56 |

給文本框(input)加上獲取焦點(diǎn)或者鼠標(biāo)懸停時(shí)的樣式切換效果,可以得到很好的用戶體驗(yàn)。要實(shí)現(xiàn)這樣的效果其實(shí)很簡單，我們只需要獲取頁面上的文本框，加上onfocus事件或者其他對應(yīng)的事件即可。本文介紹了如何在獲取焦點(diǎn)時(shí)切換樣式，明白原理后，實(shí)現(xiàn)其他效果就很簡單了。

--------------------------------------------------------------
瀏覽示例文件:
http://www.codebit.cn/pub/html/javascript/tip/input_focus/input_focus.php
--------------------------------------------------------------

Javascript:

<script type="text/javascript">
// 說明：文本框(input)獲取焦點(diǎn)(onfocus)時(shí)樣式改變的實(shí)現(xiàn)方法
// 整理：http://www.CodeBit.cn
// focusClass : 獲取焦點(diǎn)時(shí)的樣式
// normalClass : 正常狀態(tài)下的樣式
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") {
elements[i].onfocus = function()
{ this.className = focusClass; };
elements[i].onblur = function()
{ this.className = normalClass||''; };
}
}
}
</script>