亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用JavaScrip模擬實(shí)現(xiàn)仿京東搜索框功能

 更新時(shí)間:2019年10月16日 11:40:09   作者:whr瑞  
使用js模擬實(shí)現(xiàn)京東的搜索框,主要用了js中的onfocus(注冊(cè)焦點(diǎn)事件),onblur(失去焦點(diǎn)的事件);本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

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

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

  1. 在鼠標(biāo)點(diǎn)進(jìn)去的時(shí)候,里面的默認(rèn)內(nèi)容消失;
  2. 在輸入之后,再點(diǎn)擊搜索框外,輸入的內(nèi)容還在搜索框中;
  3. 如果輸入為空,點(diǎn)擊搜索框外,里面自動(dòng)顯示默認(rèn)內(nèi)容;
  4. 內(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;/* 消除原來的邊框默認(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ì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • 淺談JavaScript變量的自動(dòng)轉(zhuǎn)換和語句

    淺談JavaScript變量的自動(dòng)轉(zhuǎn)換和語句

    下面小編就為大家?guī)硪黄獪\談JavaScript變量的自動(dòng)轉(zhuǎn)換和語句。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-06
  • Popup彈出框添加數(shù)據(jù)實(shí)現(xiàn)方法

    Popup彈出框添加數(shù)據(jù)實(shí)現(xiàn)方法

    這篇文章主要為大家詳細(xì)介紹了Popup彈出框添加數(shù)據(jù)的簡(jiǎn)單實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • JS中如何優(yōu)雅的使用async await詳解

    JS中如何優(yōu)雅的使用async await詳解

    async表示異步,而await可以看作async wait,個(gè)人對(duì)async與await的簡(jiǎn)單理解就是,我們可以用同步的方式去書寫異步代碼,這篇文章主要給大家介紹了關(guān)于JS中如何優(yōu)雅的使用async await的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • layui prompt 設(shè)置允許空白提交的方法

    layui prompt 設(shè)置允許空白提交的方法

    今天小編就為大家分享一篇layui prompt 設(shè)置允許空白提交的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • IE與FireFox的JavaScript兼容問題解決辦法

    IE與FireFox的JavaScript兼容問題解決辦法

    本篇文章主要是對(duì)IE與FireFox的JavaScript兼容問題解決辦法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2013-12-12
  • 萬字詳解JavaScript手寫一個(gè)Promise

    萬字詳解JavaScript手寫一個(gè)Promise

    這篇文章主要介紹了萬字詳解JavaScript手寫一個(gè)Promise,Promise就是一個(gè)類,在執(zhí)行這個(gè)類的時(shí)候,需要傳遞一個(gè)執(zhí)行器(回調(diào)函數(shù))進(jìn)去,執(zhí)行器會(huì)立即執(zhí)行
    2022-07-07
  • 深入理解JavaScript創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)

    深入理解JavaScript創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)

    本篇文章主要介紹了JavaScript創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn),主要介紹了5種方式,有興趣的可以了解下
    2017-06-06
  • dateformat.js超輕量級(jí)的JS日期處理庫的使用

    dateformat.js超輕量級(jí)的JS日期處理庫的使用

    dateformat.js 是一個(gè)非常簡(jiǎn)潔、輕量級(jí)、不到 5kb 的很簡(jiǎn)潔的 Javascript 庫,本文主要介紹了dateformat.js超輕量級(jí)的JS日期處理庫的使用,感興趣的可以了解一下
    2023-12-12
  • JavaScript Event事件學(xué)習(xí)第一章 Event介紹

    JavaScript Event事件學(xué)習(xí)第一章 Event介紹

    Events是每一個(gè)JavaScript程序核心。什么是事件處理,它有什么問題和怎樣寫出跨瀏覽器的代碼,我將在這一章做一個(gè)概述。我也會(huì)提供一些有精彩的關(guān)于事件處理程序的細(xì)節(jié)的文章。
    2010-02-02
  • 微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板

    微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05

最新評(píng)論