使用js模擬實現京東的搜索框，主要用了js中的onfocus(注冊焦點事件)，onblur(失去焦點的事件)；

主要實現了：

在鼠標點進去的時候，里面的默認內容消失；

在輸入之后，再點擊搜索框外，輸入的內容還在搜索框中；

如果輸入為空，點擊搜索框外，里面自動顯示默認內容；

內容顏色的改變

效果圖

代碼

京東搜索框

*{

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;/* 消除原來的邊框默認屬性 */

float: left;

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

color: #888;

}

#search button{

width: 50px;

height: 35px;

background-color: #f10215;

float: left;

color: white;

}

var keyword = "iphone 11";//搜索框中默認的搜索詞

window.onload = function(){

//得到按鈕的對象

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

//得到搜索框的對象

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

//為搜索框注冊焦點事件

txt.onfocus = function(){

//當在焦點上時讓搜索框文字變成黑色

txt.style.color = "black";

//如果搜索框為關鍵字的時候,注冊焦點就讓搜索框為空

if (txt.value == keyword) {

txt.value = "";

}

}

//為搜索框注冊失去焦點事件

txt.onblur = function(){

//在失去焦點的時候如果搜索框內容為空,就讓搜索框顯示默認關鍵字

if (txt.value == "") {

this.value = keyword;

this.style.color = "#888";

}

}

}

搜索

onfocus事件：事件在對象獲得焦點時發生,常用在表單中

onblur事件：事件在對象失去焦點時發生

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

總結

以上所述是小編給大家介紹的使用JavaScrip模擬實現仿京東搜索框功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。