首页 > 其他 > 详细

某东搜索框终结版!!!

时间:2019-11-09 23:38:25      阅读:75      评论:0      收藏:0      [点我收藏+]

技术分享图片

需要用到以下几点方法!

技术分享图片

以上是某东搜索框为力求同步写了以下代码。文字消失和怎样获取焦点失去焦点事件方法就不在一一赘述!

以下用到表单事件:

Form 事件

由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):

属性描述
onblur script 元素失去焦点时运行的脚本。
onchange script 在元素值被改变时运行的脚本。
oncontextmenu script 当上下文菜单被触发时运行的脚本。
onfocus script 当元素获得焦点时运行的脚本。
onformchange script 在表单改变时运行的脚本。
onforminput script 当表单获得用户输入时运行的脚本。
oninput script 当元素获得用户输入时运行的脚本。
oninvalid script 当元素无效时运行的脚本。
onreset script 当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect script 在元素中文本被选中后触发。
onsubmit script 在提交表单时触发。

下面是代码环节

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div{
                position: relative;    
                width: 250px;
                height: 20px;
                margin:99px auto;
                /*border:2px solid red;*/
                outline:2px solid red ;
                outline-offset: 10px;
            }
            div::before{
                content: "手机";
                font-size: 20px;
                /*position: absolute;*/
                line-height: 20px;
            }
            input{
                font-size: 20px;
                position: absolute;
                height: 30px;
                left: 0;
                top: 50%;
                margin-top:-15px;
                border: none;
                outline: none;
                opacity: 0.7;
                
            }
        </style>
    </head>
    <body>
        <div id="">
            <input type="text" name="" id="" value="" />
        </div>
        <script type="text/javascript">

        var ipt = document.getElementsByTagName("input");
        var d = document.getElementsByTagName("div");
        
        ipt[0].onfocus = function(){            
            d[0].setAttribute("style","color: #999;");    
            
        }
        ipt[0].onblur = function(){
            d[0].setAttribute("style","color: #111;");
            
        }
        ipt[0].oninput = function(){
//            if(ipt[0].oninput){ipt[0].setAttribute("style","opacity: 1;");}
            ipt[0].setAttribute("style","opacity: 1;");
//            d[0].setAttribute("style","color: white;");
            if(ipt[0].value == ""){ipt[0].setAttribute("style","opacity: 0.7;");}
        }
        
    </script>
    </body>
</html>

 下面是搜索框页面效果至于后面的搜索按钮都不重要啦,大家可以去京东手机官网去验证下效果!

技术分享图片

 

 

 

 

某东搜索框终结版!!!

原文:https://www.cnblogs.com/niuyaomin/p/11828259.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!