East End version of a search box! ! !

The above is a search box to synchronize the East wrote the following code. Text disappear and how to get the focus lost focus event method is not in them here!

Use the following form events:

Form events

The event action triggered in the HTML form (applied to almost any HTML element, but the most common element in the form):

Attributes	value	description
onblur	script	Scripts that run when the element loses focus.
onchange	script	Scripts that run when the element value is changed.
OnContextMenu	script	When the scripts that run when the context menu is triggered.
onfocus	script	Scripts that run when the element gets focus.
onformchange	script	Scripts that run when the form is changed.
onforminput	script	When the form to get a script to run when the user input.
oninput	script	When the script is run when the element gets user input.
oninvalid	script	Scripts that run when invalid element when.
onreset	script	Fires when the reset button is clicked in a form. HTML5 is not supported.
onselect	script	Chinese elements in this trigger after being selected.
onsubmit	script	Triggered when the form is submitted.

Here is the code links

<!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>

Here is the search box search results page as for the back button does not matter you, you can go to the official website Jingdong phone to verify the effect of the next!

East End version of a search box! ! !

Form events

Here is the search box search results page as for the back button does not matter you, you can go to the official website Jingdong phone to verify the effect of the next!

Guess you like