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>
  • 相关阅读:
    铺地毯
    解方程
    引水入城
    10.16今日暂时停更博客
    聪明的质监员
    CCF NOI plus 201(7)6 初赛题 解题报告
    初赛可能会用到的计算机基础理论知识整理
    火柴排队
    借教室
    10.10今日暂时停更博客
  • 原文地址:https://www.cnblogs.com/softmans/p/3494326.html
Copyright © 2011-2022 走看看