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>
  • 相关阅读:
    java事件处理机制(自定义事件)
    EL表达式 (详解)
    Java编程思想(四) —— 复用类
    优秀辅助网站使用记录
    快速部署tomcat项目的Shell脚本
    数据库SQL优化大总结
    常用排序算法及应用背景
    Java面试通关秘籍汇总集
    Java堆、栈和常量池以及相关String详解
    常用加密算法概述
  • 原文地址:https://www.cnblogs.com/softmans/p/3494326.html
Copyright © 2011-2022 走看看