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>
  • 相关阅读:
    2017.10.27
    2017.10.26
    codeforces 652 E Pursuit For Artifacts
    bzoj 1123 BLO
    bzoj 2839 集合计数
    bzoj 3170: [Tjoi 2013]松鼠聚会
    bzoj 2503 相框 欧拉回路
    bzoj 1786 [Ahoi2008]Pair 配对
    bzoj 1014 [JSOI2008]火星人prefix 哈希+splay
    csp-s74 瓶颈
  • 原文地址:https://www.cnblogs.com/softmans/p/3494326.html
Copyright © 2011-2022 走看看