案例 模擬京東快遞單號查詢

2022-08-12 04:48:16 字數 1542 閱讀 4132

實現功能:當我們在文字框輸入內容時,文字框上面自動顯示大字型大小的內容

① 快遞單號輸入內容時,上面的大號字型盒子(con)顯示出來(這裡面的字型大小更大)

② 表單檢測使用者輸入:給表單新增鍵盤事件

③ 同時把快遞單號裡面的值(value)獲取過來賦值給con盒子(innertext)作為內容

④ 如果快遞單號裡面的內容為空,則隱藏大號字型盒子(con)盒子

注意:keydown和keypress在文字框裡面的特點:它們兩個事件觸發的時候,文字還沒有落入文字框中。

keyup事件觸發的時候,文字已經落入文字框裡面了。

所以,如果使用keydown和keypress事件的話,大號字型盒子與快遞單號盒子在輸入的時候總是相差乙個字。

<

style

>

* .search

.con

.con::before

style

>

<

div

class

="search"

>

<

div

class

="con"

>123

div>

<

input

type

="text"

placeholder

="請輸入您的快遞單號"

class

="jd"

>

div>

<

script

>

//快遞單號輸入內容時, 上面的大號字型盒子(con)顯示(這裡面的字型大小更大)

//表單檢測使用者輸入: 給表單新增鍵盤事件

//同時把快遞單號裡面的值(value)獲取過來賦值給 con盒子(innertext)做為內容

//如果快遞單號裡面內容為空,則隱藏大號字型盒子(con)盒子

varcon

=document.queryselector(

'.con');

varjd_input

=document.queryselector(

'.jd');

jd_input.addeventlistener(

'keyup',

function

()

else

})//當我們失去焦點,就隱藏這個con盒子

jd_input.addeventlistener(

'blur',

function

() )

//當我們獲得焦點,就顯示這個con盒子

jd_input.addeventlistener(

'focus',

function

() })

script

>

JS案例 模擬京東快遞單號查詢

doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title search con con before style...

前端模擬京東快遞單號查詢

請輸入您的快遞單號 class jd div var con document.queryselector con var jd input document.queryselector jd jd input.addeventlistener keyup function else jd inpu...

全國快遞物流查詢 快遞單號查詢介面api

電商,erp廠商可能需要物流資訊介面,對運單號的物流軌跡進行跟蹤,通常有些免費的不好用,及時性要求達不到,收費的也太貴了。最近發現乙個免費的api介面,及時性非常高,基本上就是實時返回。快遞查詢介面 物流跟蹤介面 是快遞鳥為使用者提供的定製化服務,使用者可將訂單資訊通過快遞鳥訂閱給快遞公司,快遞公司...