javascript實現京東快遞單號的查詢效果
阿新 • • 發佈:2020-12-01
案例:模擬京東快遞單號的查詢效果,供大家參考,具體內容如下
要求:當我們在文字框中輸入內容時,文字框上面自動顯示大字號的內容
分析:
- 輸入內容時,上面的大盒子會自動顯示出來(這裡字號更大)
- 表單檢測使用者輸入,給表單新增鍵盤事件
- 同時把快遞單號裡面的值(value)獲取過來複制給大盒子作為內容
- 如果快遞單號裡面內容為空,就隱藏大盒子
- 當失去焦點,大盒子也隱藏
注意:keydown 和 keypress 在文字框裡面的特點 : 他們兩個事件觸發的時候,文字還沒有落入文字框中,keyup 事件觸發的時候,文字已經落入文字框裡了
<style> * { padding: 0; margin: 0; } .search { position: relative; width: 178px; margin: 100px; } .con { display: none; position: absolute; top: -48px; width: 171px; border: 1px solid rgba(0,0.2); box-shadow: 0 2px 4px rgba(0,0.2); padding: 5px 0; font-size: 18px; line-height: 20px; color: #333; } .con::before { content: ""; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent; } </style> </head> <body> <div class="search"> <div class="con"></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.innerHTML = this.value; } }); //當失去焦點,就隱藏盒子 jd_input.addEventListener("blur",function () { con.style.display = "none"; }); //當獲得焦點,就顯示盒子 jd_input.addEventListener("focus",function () { if (this.value !== "") { con.style.display = "block"; } }); </script> </body>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。