On the search box gray font focus is disappear, lose focus is appear, does not affect the search case

Date: 2021/10/24 Author: Orange

Gray prompt word in search box, as shown in the figure:

The code is as follows:

The HTML code

<body> <div class="box"> <input type="text" value=" phone "> </div> <script document.querySelector('input'); Input. onfocus = function() {if (this.value == 'phone ') {input.value = ''; input.style.color = 'black'; Input. onblur = function() {if (this.value == ") {input.value = 'phone '; input.style.color = '#ccc'; } } </script> </body>Copy the code

The CSS code is as follows:

.box {
        width: 1200px;
        margin: 0 auto;
    }
    
    .box input {
        display: block;
        width: 500px;
        height: 35px;
        outline: none;
        border: 1px solid #ccc;
        color: #ccc;
        margin: 0 auto;
    }
Copy the code