JavaScript實現京東快遞單號查詢
阿新 • • 發佈：2020-12-01
JavaScript網頁製作–京東快遞單號查詢，供大家參考，具體內容如下
上篇講到了京東網頁的一個可能不被大多數人熟知的小功能，S鍵自動獲得焦點，相比於那個功能，這個快遞單號查詢的功能可能更明瞭一點，雖然我也覺得很雞肋。在網頁搜尋京東快遞單號查詢後，會出現這樣的一個功能，當你在快遞單號欄輸入快遞單號的時候，上方會出現一個較大的文字框，用較大的字型顯示出你輸入的快遞單號。（雖然我覺得字號也沒有差很多）
功能實現：
1、在輸入快遞單號的時候，上方出現一個盒子，這個盒子的字號更大。
2、表單檢測使用者輸入，新增鍵盤事件。
3、將輸入框快遞單號的值獲取給上方的盒子的innerText。
4、快遞單號裡面的value值為空時隱藏上方的盒子。
在沒有輸入的情況下，只顯示input框
在輸入快遞單號的時候，input框上方出現一個盒子，同步輸入的快遞單號。
程式實現：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>京東快遞單號查詢</title>
<style>
div {
width: 170px;
height: 30px;
border: 1px solid black;
font-size: 20px;
}
</style>
</head>
<body>
<div style="display: none;"></div>
<input type="text">
<button >查詢</button>
<script>
var input = document.querySelector('input');
var div = document.querySelector('div');
//當input框獲得焦點時
input.addEventListener('focus',function(){
//如果input框中的內容不為空
if(input.value != ''){
//顯示div盒子
div.style.display = 'block';
}
input.addEventListener('keyup',function(){
//如果div內容為空 隱藏div
if(input.value ===''){
div.style.display = 'none';
}else{
//div內容不為空 顯示div
div.style.display = 'block';
//將input中的值賦給div
div.innerText = input.value;
}
})
})
//當input框失去焦點時隱藏div
input.addEventListener('blur',function(){
div.style.display = 'none';
})
</script>
</body>
</html>在程式監聽事件中不使用keydown / keypress的原因：
keydown / keypress在按下鍵盤時觸發，此時input框中沒有內容，按下後有了內容，但是並沒有再次觸發，而此時div盒子並不會彈出來，在下一次鍵盤按下時會彈出div盒子，盒子中會顯示第一次輸入的數字。因此在使用keydown / keypress時會出現資料不同步的現象。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。