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

最新推荐文章于 2021-06-07 17:15:41 发布

orange--c

最新推荐文章于 2021-06-07 17:15:41 发布

阅读量2.5k

点赞数

分类专栏： js 文章标签： css javascript html js html5

本文链接：https://blog.csdn.net/m0_52173534/article/details/117428631

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

在这里插入图片描述
代码如下：
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;
    }

orange--c

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5搜索框灰色提示字、关键词

关于搜索框灰色字体聚焦是消失，失去焦点是出现，不影响搜索案例搜索框灰色提示字，如图所示：代码如下：html代码<body><div class="box"> <input type="text" value="手机"></div><script> //获取元素 var input = document.querySelector('input'); //聚焦时搜索框中内容自动消失,字体颜色加深
复制链接

扫一扫

专栏目录