用原生Javascript实现css的placeholder

最新推荐文章于 2022-08-21 01:55:02 发布

alisaLearn

最新推荐文章于 2022-08-21 01:55:02 发布

阅读量636

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/alisalearn/article/details/74080213

版权

原生JS-校招常见题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我的思路是用一个div表示placeholder预留字的展示，
此div与Input框设置同一位置叠加;
然后给Input框监听一个input事件，
当文本框不为空且input事件发生时，
预留字消失
当文本框为空时，预留字出现：
实现这个功能有很多方式，欢迎评论区讨论。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .inpt2{
            display: block; 
            position:absolute; 
            top:30px;
        }
        .ph{
            color: #dddddd; 
            font-size: 1em;
            position:absolute; 
            top:30px; 
            left:10px;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="123123" class="inpt1" />
    <input type="text" class="inpt2" />
    <div class="ph">123123</div>
    <script>
        (function () {
            var inpt2 = document.getElementsByClassName('inpt2');
            var ph = document.getElementsByClassName('ph');
            inpt2[0].addEventListener("input", function () {
                ph[0].style.display = "none";
                if (inpt2[0].value === '') {
                    ph[0].style.display = "block";
                };
            }, false)
        })();
    </script>
</body>
</html>

alisaLearn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生Javascript实现css的placeholder

我的思路是用一个div表示placeholder预留字的展示，此div与Input框设置同一位置叠加; 然后给Input框监听一个input事件，当文本框不为空且input事件发生时，预留字消失当文本框为空时，预留字出现：<!DOCTYPE html><html><head> <meta charset="utf-8"> <style type="text/cs
复制链接

扫一扫

专栏目录