zoukankan      html  css  js  c++  java
  • JavaScript为input/textarea自定义hover,focus效果

    <title>JavaScript为input/textarea自定义hover,focus效果</title>
    <script type="text/javascript">
    function suckerfish(type, tag, parentId) {  
    if (window.attachEvent) {  
    window.attachEvent("onload", function() {  
    var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); 
    type(sfEls);  
    });  
    }  
    }  
    sfHover = function(sfEls) {  
    for (var i=0; i < sfEls.length; i++) {  
    sfEls[i].onmouseover=function() {  
    this.className+=" iptHover";  
    }  
    sfEls[i].onmouseout=function() {  
    this.className=this.className.replace(new RegExp(" iptHover\b"), "");  
    }  
    }  
    }  
    sfFocus = function(sfEls) {  
    for (var i=0; i < sfEls.length; i++) {  
    sfEls[i].onfocus=function() {  
    this.className+=" iptFocus";  
    }  
    sfEls[i].onblur=function() {  
    this.className=this.className.replace(new RegExp(" iptFocus\b"), "");  
    }  
    }  
    }
    </script>
    <style type="text/css">
    textarea{
    border:1px solid #BBE1F1;
    250px;
    height:80px;
    }
     .iptHover,input:hover,textarea:hover{
    border:1px solid #77C2E3;
    }
    .iptFocus,input:focus,textarea:focus{
    border:1px solid #77C2E3;
    background-color:#EFF7FF;
    }
    </style>
    <input type="text" name="textfield" /><br />
    <textarea name="textarea"></textarea>
    <script type="text/javascript">
    suckerfish(sfHover, "input");
    suckerfish(sfFocus, "input");
    suckerfish(sfHover, "textarea");
    suckerfish(sfFocus, "textarea");
    </script>
  • 相关阅读:
    HDU 1333 基础数论 暴力
    HDU 1299 基础数论 分解
    HDU 1211 EXGCD
    HDU 3507 单调队列 斜率优化
    博弈
    std:ios::sync_with_stdio(false);
    NBUT[1220] SPY
    nbut1217 Dinner
    poj2236Wireless Network
    ZOJ Problem Set
  • 原文地址:https://www.cnblogs.com/softmans/p/3494326.html
Copyright © 2011-2022 走看看