点击隐藏文字案例 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
            /*整个盒子宽258，高40*/
        .search{
            width:258px;
            height:40px;
            background-color: pink;
            margin:100px  auto;
        }
            /*input搜索框宽200，高40，左边加了8px的内边距，没有边框，去掉外框线，文字的颜色初始为浅色的，左浮动*/
        .search input{
            width:208px;
            height:40px;
            background: url(C:/Users/高萍/Desktop/前端学习/images/left.jpg) no-repeat;
            border:0;
            padding:0;
            outline-style:none;
            padding-left:8px;
            float:left;
            color:#ccc;

        }
            /*按钮图片宽度42，高度40，没有边框和内边距，左浮动，当鼠标停留在按钮图片上时，鼠标光标变成"手"的指向.*/
        .search button{
            width:42px;
            height:40px;
            background:url(C:/Users/高萍/Desktop/前端学习/images/right.jpg)  no-repeat;
            border:0;
            padding:0;
            float:left;
            cursor:pointer;
        }
    </style>
    <script>    //js部分，当Input输入框获得光标的时候，如果用户说第一次输入，也就是输入框中的文字还是“请输入...”的时候，输入框中的文字要清空，并且用户输入的文字
                 //   颜色要变成深颜色；当Input输入框失去焦点的时候，也就是输入框中的文字是空的，此时，输入框中的“请输入...”文字要复原，
            window.onload=function(){
                var txt=document.getElementById("txt");
                txt.onfocus=function() {    //获得焦点的时候
                    if(txt.value=="请输入..."){
                        txt.value="";   //输入框中的文字为空的表达
                        txt.style.color="#333"; //#333是深颜色
                    }
                }
                txt.onblur=function(){  //失去焦点的时候
                    if(txt.value=="")
                    {
                        txt.value="请输入...";
                        txt.style.color="#ccc"; //#ccc是浅色
                    }
                }
            }
    </script>
</head>
<!--<body>  一个大盒子，左边是input搜索框，右边是按钮,搜索框中的文字是浅色的"请输入..."-->
        <div class="search">
            <input type="text"/ value="请输入..."  id="txt">
            <button></button>
        </div>
</body>
</html>

 

posted @ 2019-07-17 00:32  shanlu  阅读(184)  评论(0)    收藏  举报