码迷,mamicode.com
首页 > 其他好文 > 详细

仿某东的搜索框初级版

时间:2019-11-09 09:47:51      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:asc   display   margin   value   html   attribute   bsp   lin   strong   

首先需要获取焦点事件 onfocus和失去焦点事件 onblur

技术图片

 

 

 

 下面是代码环节:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        input{
            color: #999;
            outline:2px solid red;
            outline-offset: 2px;
            border: none;
            display: block;
            margin:50px auto;
        }
    </style>
    <title>Document</title>
</head>
<body>
    
    <input type="text" name="" id="" value="手机" />
    <script type="text/javascript">
//        获取元素
        var ipt = document.getElementsByTagName("input");
//        注册事件 获取焦点事件 onfocus
        ipt[0].onfocus = function(){            
//            alert("得到了焦点");实验一下能不能得到焦点
            if(ipt[0].value === "手机"){
            ipt[0].value = ""
        }
        
        ipt[0].setAttribute("style","color: #333;");
        }
//        注册事件 失去焦点事件 onblur
        ipt[0].onblur = function(){
//            alert("失去焦点");实验一下能不能失去焦点
            if(ipt[0].value === ""){
            ipt[0].value = "手机"
        }
            ipt[0].setAttribute("style","color: #999;");
        }
    </script>
</body>
</html>

某东效果图

技术图片

 

 

 

仿某东的搜索框初级版

标签:asc   display   margin   value   html   attribute   bsp   lin   strong   

原文地址:https://www.cnblogs.com/niuyaomin/p/11824012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!