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