一个简单的输入提示框
#今天发现某东的填写快递单号的输入框会自动出现一行放大的字体,觉得有意思的,自己简单的模拟了一下,感兴趣的朋友可以相互交流哦🙂
js部分(css部分就简单设置一下,这里就不放啦)
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerText = this.value;
}
})
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
jd_input.addEventListener('focus', function() {
if (this.value !== '') {
con.style.display = 'block';
}
})
</script>