博客

HTML5搜索框灰色提示字、关键词

  • Post author:
  • Post category:其他




关于搜索框灰色字体聚焦是消失，失去焦点是出现，不影响搜索案例

搜索框灰色提示字，如图所示：

在这里插入图片描述

代码如下：

html代码 

<body>
<div class="box">
    <input type="text" value="手机">
</div>

<script>
    //获取元素
    var input = document.querySelector('input');
    //聚焦时  搜索框中内容自动消失,字体颜色加深
    input.onfocus = function() {
        if (this.value == '手机') {
            input.value = '';
            input.style.color = 'black';
        }

    }

    //失去聚焦时  搜索框内容自动恢复
    input.onblur = function() {
        if (this.value == '') {
            input.value = '手机';
            input.style.color = '#ccc';
        }
    }
</script>
</body>

css代码如下： 

.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;
    }


版权声明：本文为m0_52173534原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。