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