文本框输入显示大号字体预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟京东快递单号查询</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #f1f1f1;
}
.search{
position: relative;
margin: 200px 200px;
}
.container{
display: none;
width: 150px;
height: 24px;
position: relative;
top: 20px;
left: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-style:none;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.container::before{
content: '';
width: 0;
height: 0;
position: absolute;
top:20px;
left: 30px;
border: 8px solid #fff;
border-color: #fff transparent transparent;
}
input{
position: absolute;
top: 45px;
left: 21px;
width: 150px;
margin-top: 4px;
outline: none;
font-size: 14px;
}
</style>
<body>
<div class="search">
<div class="container"></div>
<input type="text" placeholder="请输入快递单号">
</div>
<script>
var con=document.querySelector('.container');
var input=document.querySelector('input');
input.addEventListener('keyup',function (){
if (this.value==''){
con.style.display='none';
}else{
con.style.display='block';
con.innerHTML=this.value;
}
})
input.addEventListener('focus',function(){
if(this.value!=='') {
con.style.display = 'block';
}
})
input.addEventListener('blur',function(){
con.style.display='none';
})
</script>
</body>
</html>