![在這裏插入圖片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div.out {
width: 200px;
height: 100px;
margin: 50px;
overflow: hidden;
}
div.big {
width: 150px;
height: 30px;
background-color: #FFF;
position: relative;
border: 1px solid #000;
display: none;
}
div.big::after {
content: "";
width: 10px;
height: 10px;
position: absolute;
bottom: -1px;
left: 18px;
background-color: #FFF;
border-left: 1px solid #000;
border-top: 1px solid #000;
transform: translateY(50%) rotate(-135deg);
}
input {
position: absolute;
top: 80px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="out">
<div class="big"></div>
<input type="text" placeholder="請輸入您的快遞單號">
</div>
<script>
var search = document.querySelector('input');
var div = document.querySelector('.big');
document.addEventListener('keyup', function(e) {
if (e.keyCode === 83) {
search.focus();
if (search.value == '') {
div.style.display = 'none';
} else {
div.innerHTML = search.value;
div.style.display = 'block';
}
}
});
search.addEventListener('keyup', function() {
if (search.value == '') {
div.style.display = 'none';
} else {
div.innerHTML = search.value;
div.style.display = 'block';
}
});
search.addEventListener('blur', function() {
div.style.display = 'none';
});
</script>
</body>
</html>
