• 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>
  • 相关阅读:
    委托经典--由浅入深讲解
    原生的AJAX
    asp.net传值
    flex做的圣杯布局
    弹性盒布局实例
    CSS3实现的几个小loading效果
    requireJS基本概念及使用流程(2)
    require.js的基本概念及使用流程(1)
    JSz中的静态方法和实例方法的分析
    前端性能优化的方法
  • 原文地址:https://www.cnblogs.com/softmans/p/3494326.html
Copyright © 2020-2023  润新知