JavaScript實現(xiàn)京東快遞單號查詢
JavaScript網(wǎng)頁制作–京東快遞單號查詢,供大家參考,具體內(nèi)容如下
上篇講到了京東網(wǎng)頁的一個可能不被大多數(shù)人熟知的小功能,S鍵自動獲得焦點,相比于那個功能,這個快遞單號查詢的功能可能更明了一點,雖然我也覺得很雞肋。在網(wǎng)頁搜索京東快遞單號查詢后,會出現(xiàn)這樣的一個功能,當你在快遞單號欄輸入快遞單號的時候,上方會出現(xiàn)一個較大的文本框,用較大的字體顯示出你輸入的快遞單號。(雖然我覺得字號也沒有差很多)
功能實現(xiàn):
1、在輸入快遞單號的時候,上方出現(xiàn)一個盒子,這個盒子的字號更大。
2、表單檢測用戶輸入,添加鍵盤事件。
3、將輸入框快遞單號的值獲取給上方的盒子的innerText。
4、快遞單號里面的value值為空時隱藏上方的盒子。
在沒有輸入的情況下,只顯示input框
在輸入快遞單號的時候,input框上方出現(xiàn)一個盒子,同步輸入的快遞單號。
程序?qū)崿F(xiàn):
<!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框中的內(nèi)容不為空 if(input.value != ''){ //顯示div盒子 div.style.display = 'block'; } input.addEventListener('keyup',function(){ //如果div內(nèi)容為空 隱藏div if(input.value ===''){ div.style.display = 'none'; }else{ //div內(nèi)容不為空 顯示div div.style.display = 'block'; //將input中的值賦給div div.innerText = input.value; } }) }) //當input框失去焦點時隱藏div input.addEventListener('blur',function(){ div.style.display = 'none'; }) </script> </body> </html>
在程序監(jiān)聽事件中不使用keydown / keypress的原因:
keydown / keypress在按下鍵盤時觸發(fā),此時input框中沒有內(nèi)容,按下后有了內(nèi)容,但是并沒有再次觸發(fā),而此時div盒子并不會彈出來,在下一次鍵盤按下時會彈出div盒子,盒子中會顯示第一次輸入的數(shù)字。因此在使用keydown / keypress時會出現(xiàn)數(shù)據(jù)不同步的現(xiàn)象。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap+Mybatis框架下實現(xiàn)表單提交數(shù)據(jù)重復驗證
這篇文章主要介紹了BootStrap+Mybatis框架下實現(xiàn)表單提交數(shù)據(jù)重復驗證功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03TypeScript中Map對象使用及Map與字典的區(qū)別詳解
Map對象主要的應(yīng)用場景在于數(shù)據(jù)重組和數(shù)據(jù)儲存,下面這篇文章主要給大家介紹了TypeScript中Map對象使用及Map與字典的區(qū)別的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01Javascript:為input設(shè)置readOnly屬性(示例講解)
本篇文章主要是對Javascript中為input設(shè)置readOnly屬性的示例代碼進行了介紹。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【九】實現(xiàn)Web頁面內(nèi)容的打印預(yù)覽和保存操作
本篇文章主要介紹如何實現(xiàn)Web頁面內(nèi)容的打印預(yù)覽和保存操作的相關(guān)知識,感興趣的朋友一起學習吧2016-05-05JS與jQuery實現(xiàn)子窗口獲取父窗口元素值的方法
這篇文章主要介紹了JS與jQuery實現(xiàn)子窗口獲取父窗口元素值的方法,涉及javascript與jQuery操作窗口元素的相關(guān)技巧,需要的朋友可以參考下2017-04-04javascript動態(tài)創(chuàng)建對象的屬性詳解
在本篇文章中我們給大家分享了關(guān)于javascript動態(tài)創(chuàng)建對象的屬性的相關(guān)知識點以及代碼分享,需要的朋友們參考學習下。2018-11-11