用原生Javascript实现css的placeholder

来源：互联网发布：拓普康怎样导入数据编辑：程序博客网时间：2024/06/05 09:51

我的思路是用一个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>

阅读全文

0 0