本文已参与「新人创作礼」活动，一起开启掘金创作之路
keyup时，将input中的值给div，div的font-size较大
<style>
input {
width: 200px;
}
div {
position: relative;
display: none;
width: 180px;
height: 50px;
margin-top: 10px;
padding: 10px;
font-size: 30px;
border: 2px solid red;
}
div::before {
content: '';
position: absolute;
top: -20px;
left: 10px;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-bottom: 10px solid red;
padding: 0px;
}
input {
font-size: 14px;
}
</style>
<body>
<input type="text" value="">输入快递单号
<div></div>
<script>
var input = document.querySelector('input');
var box = document.querySelector('div');
input.addEventListener('blur', function () {
box.style.display = 'none';
})
input.addEventListener('focus', function () {
box.style.display = 'block';
if (box.innerHTML == "") {
box.style.display = 'none';
}
})
input.addEventListener('keyup', function (ev) {
box.innerHTML = input.value;
if (box.innerHTML == "") {
box.style.display = 'none';
} else {
box.style.display = 'block';
}
})
</script>
</body>
