欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2014年01月10日 09:28:52   作者：  
本篇文章主要是對(duì)文本框(input)獲取焦點(diǎn)(onfocus)時(shí)樣式改變的示例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

摘要：許多重視用戶(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)單了。

復(fù)制代碼 代碼如下:

 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');
        }


復(fù)制代碼 代碼如下:

<style type="text/css">
.normalInput { border:1px solid #ccc; }
.focusInput {    border:1px solid #FFD42C; }
</style>

相關(guān)文章

最新評(píng)論