仿京东搜索框html的onfocus和onblur使用

71 阅读 0 评论 47 点赞

我是靠谱客的博主安静柚子，最近开发中收集的这篇文章主要介绍仿京东搜索框html的onfocus和onblur使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .box{
            position: relative;
            width: 200px;
            height: 50px;
        }
        .moren{
            line-height: 50px;
            color: grey;
        }
        
        .moren,
        input {
            position: absolute;
            padding-left: 20px;
            font-size: 23px;
            width: 200px;
            height: 50px;
        }

        input {
            outline: none;
            background-color: transparent;
        }
    </style>
    
</head>

<body>
    <div class="box">
        <div class="moren">Jnimy</div>
        <input type="text">
    </div>
    <script>
        var div = document.querySelector('.moren')
        var input = document.querySelector('input')
        var moren = div.innerHTML
        input.onfocus = function () {
            div.innerHTML = ''
        }
        input.onblur = function () {
            if (input.value === '') {
                div.innerHTML = moren
            }
        }
    </script>
</body>

</html>