zoukankan      html  css  js  c++  java
  • 淘宝商城文本输入框效果模仿

    html

    <div id="div1">
        <label for="inputs">请输入内容</label>
        <input type="text" id="inputs" name="inputs">
    </div>

    css

    *{font-size:14px;}
    input,input:focus{outline:none}
    label{cursor:pointer;position:absolute;z-index:1;float:left;height:25px;line-height:25px;padding-left:5px;}
    #div1{position:relative;border:solid 1px #666;height:25px;width:160px;color:#333;}
    #div1 input{position:absolute;z-index:2;border:none;background:none;height:25px;line-height:25px;padding-left:5px;font-size:14px;}

    JavaScript

    /*$(function(){
        $("#inputs").focus(function(){
            $("label").css("color","#999");
        });
        $("#inputs").keypress(function(){
            $("label").hide();
        });
        $("#inputs").blur(function(){
            var i=$(this).val();
            if(i=="" || i==null || i=="请输入内容"){
                $("label").show().css("color","#333");
            }
        });
    });*/
    window.onload=function(){
        var label=document.getElementById("div1").getElementsByTagName("label")[0];
        var input=document.getElementById("inputs");
        input.onfocus=function(){
            label.style.color="#999999";
        }
        input.onkeypress=function(){
            label.style.display="none";
        }
        input.onblur=function(){
            var values=input.value;
            if(values=="" || values==null || values=="请输入内容"){
                input.value=="请输入内容";
                label.style.color="#333";
                label.style.display="block";
            }
        }
    }
  • 相关阅读:
    36、【opencv入门】运动物体检测(2)
    二叉树数
    多边形的三角划分
    乘积最大
    加分二叉树
    c++ 装箱问题
    生物基元问题
    一般性的最少硬币组成问题
    打包
    挤牛奶
  • 原文地址:https://www.cnblogs.com/leejersey/p/3371125.html
Copyright © 2011-2022 走看看