使用js模擬實(shí)現(xiàn)京東的搜索框，主要用了js中的onfocus(注冊(cè)焦點(diǎn)事件)，onblur(失去焦點(diǎn)的事件)；

主要實(shí)現(xiàn)了：

在鼠標(biāo)點(diǎn)進(jìn)去的時(shí)候，里面的默認(rèn)內(nèi)容消失；

在輸入之后，再點(diǎn)擊搜索框外，輸入的內(nèi)容還在搜索框中；

如果輸入為空，點(diǎn)擊搜索框外，里面自動(dòng)顯示默認(rèn)內(nèi)容；

內(nèi)容顏色的改變

效果圖

代碼

京東搜索框

*{

margin: 0;

padding: 0;

border: 0;

}

#search{

width: 550px;

height: 35px;

margin: 100px auto;

}

#search input{

width: 492px;

height: 31px;

border: 2px solid #f10215;

outline-style: none;/* 消除原來的邊框默認(rèn)屬性 */

float: left;

padding-left: 4px;/* 讓文字在搜索的時(shí)候距離框4px */

color: #888;

}

#search button{

width: 50px;

height: 35px;

background-color: #f10215;

float: left;

color: white;

}

var keyword = "iphone 11";//搜索框中默認(rèn)的搜索詞

window.onload = function(){

//得到按鈕的對(duì)象

var btnsearch = document.getElementById("search").getElementsByTagName("button")[0];

//得到搜索框的對(duì)象

var txt = document.getElementById("search").getElementsByTagName("input")[0];

//為搜索框注冊(cè)焦點(diǎn)事件

txt.onfocus = function(){

//當(dāng)在焦點(diǎn)上時(shí)讓搜索框文字變成黑色

txt.style.color = "black";

//如果搜索框?yàn)殛P(guān)鍵字的時(shí)候,注冊(cè)焦點(diǎn)就讓搜索框?yàn)榭?/p>

if (txt.value == keyword) {

txt.value = "";

}

}

//為搜索框注冊(cè)失去焦點(diǎn)事件

txt.onblur = function(){

//在失去焦點(diǎn)的時(shí)候如果搜索框內(nèi)容為空,就讓搜索框顯示默認(rèn)關(guān)鍵字

if (txt.value == "") {

this.value = keyword;

this.style.color = "#888";

}

}

}

搜索

onfocus事件：事件在對(duì)象獲得焦點(diǎn)時(shí)發(fā)生,常用在表單中

onblur事件：事件在對(duì)象失去焦點(diǎn)時(shí)發(fā)生

css中的屬性：outline用于修飾元素的輪廓；

總結(jié)

以上所述是小編給大家介紹的使用JavaScrip模擬實(shí)現(xiàn)仿京東搜索框功能,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

總結(jié)

以上是生活随笔為你收集整理的京东搜索框html,使用JavaScrip模拟实现仿京东搜索框功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。