使用JavaScrip模擬實(shí)現(xiàn)仿京東搜索框功能
更新時(shí)間：2019年10月16日 11:40:09 作者：whr瑞
使用js模擬實(shí)現(xiàn)京東的搜索框，主要用了js中的onfocus(注冊(cè)焦點(diǎn)事件)，onblur(失去焦點(diǎn)的事件)；本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
使用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)容顏色的改變
效果圖
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京東搜索框</title>
<style type="text/css">
*{
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;/* 消除原來(lái)的邊框默認(rèn)屬性 */
float: left;
padding-left: 4px;/* 讓文字在搜索的時(shí)候距離框4px */
color: #888;
}
#search button{
width: 50px;
height: 35px;
background-color: #f10215;
float: left;
color: white;
}
</style>
<script type="text/javascript">
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)榭?
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";
}
}
}
</script>
</head>
<body>
<div id="search">
<input type="text" value="iphone 11" />
<button>搜索</button>
</div>
</body>
</html>
- onfocus事件：事件在對(duì)象獲得焦點(diǎn)時(shí)發(fā)生,常用在表單中
- onblur事件：事件在對(duì)象失去焦點(diǎn)時(shí)發(fā)生
css中的屬性：outline用于修飾元素的輪廓；
總結(jié)
以上所述是小編給大家介紹的使用JavaScrip模擬實(shí)現(xiàn)仿京東搜索框功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
namespace.js Javascript的命名空間庫(kù)
命名空間的好處已經(jīng)耳熟能詳，但是JS中并沒有原生態(tài)支持命名空間，這個(gè)庫(kù)就是為js提供命名空間的功能。2011-10-10
es7學(xué)習(xí)教程之Decorators（修飾器）詳解
這篇文章主要給大家介紹了關(guān)于es7中Decorators（修飾器）的相關(guān)資料，文中通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
利用uni-app和uView實(shí)現(xiàn)多圖上傳功能全過(guò)程
最近在使用uniapp開發(fā)的微信小程序中使用了圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于利用uni-app和uView實(shí)現(xiàn)多圖上傳功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
JavaScript立即執(zhí)行函數(shù)與函數(shù)劫持的作用
IIFE全拼Imdiately Invoked Function Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
微信小程序的出現(xiàn)給我們提供了一種使用應(yīng)用的新方式和體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于uniapp打包成微信小程序的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對(duì)table元素遍歷與獲取的技巧,需要的朋友可以參考下2015-07-07
本文介紹了對(duì)javascript數(shù)據(jù)類型；隱式轉(zhuǎn)換 （+ 和 -，== 和 ===）；包裝對(duì)象等相關(guān)知識(shí)進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js 用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽示例
用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽，主要是html中常用的一些標(biāo)簽，在本文有詳細(xì)的示例，喜歡的朋友可以參考下2013-11-11
這篇文章主要介紹了 Scala解析Json字符串的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下2017-10-10
近期月報(bào)里提到了valueOf方法,興致來(lái)了翻了下ECMA5里關(guān)于valueOf方法的介紹真是令人發(fā)指啊,不可思議的朋友可以參考下啊2013-02-02