欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)搜索欄效果

 更新時間:2018年11月16日 15:17:47   作者:心所向在腳下  
這篇文章主要為大家詳細介紹了js實現(xiàn)搜索欄效果,以及焦點問題的解決,具有一定的參考價值,感興趣的小伙伴們可以參考一下

小編這邊主要是介紹一個js中搜索欄的實現(xiàn)(沒有提交數(shù)據(jù)那些),重點在于對焦點問題的理解。

那么這邊小編就是要實現(xiàn)這樣的一個搜索框

對焦點的理解:

通俗來講當我們鼠標單擊一個盒子時光標停留在該盒子事件上實現(xiàn)用戶與欄之間的交互,這樣就表明該盒子獲取了焦點,以案例來說我們平常搜索欄點擊可以輸入文字,這個時候該搜索欄就獲得了焦點。

同理失去焦點也是同樣當點擊頁面其余位置時失去對先前盒子可以進行的操作。

那么直接以小編這個案例來說代碼如下:

CSS部分:

<style> 
 *{
  margin: 0;
  padding: 0;
 }
 input,button{
  border: 0 none;
  padding: 0;
  outline-style: none;
 }
 .search{
  margin: 100px auto;
  width: 258px;
  height: 40px;
  overflow: hidden;
 }
 .search input{
  float: left;
  width: 208px;
  height: 40px;
  background: url("left.jpg") no-repeat;
 
  padding-left:8px;
  color: #ccc;
 }
 .search button{
  float: left;
  height: 40px;
  width: 42px;
  background: url("right.jpg") no-repeat;
  cursor: pointer;
 } 
</style>
 
<body>
<div class="search">
 <input type="text" value="請輸入..." id="txt"> //盒子架構div中一個文本框一個按鈕
 <button id="btn"></button>
</div>
 
</body>

js部分:

<script>
  window.onload=function () {
   function $id(id) {
    return document.getElementById(id);
   } //雖然該案例中這種獲取id方式比較麻煩但這是通常的一種方法避免一直去寫獲取
   $id("txt").onfocus=function () {
    if (this.value=="請輸入..."){
     this.value=""; //這邊是賦值別搞錯了
     this.style.color="#333"; //黑色
    }
   } //當用戶點擊時初始文字消失
   $id("txt").onblur=function () {
    if (this.value==""){
     this.value="請輸入..."
     this.style.color="#ccc"; //透明灰
    } //誰調用this指向誰
   }//當為空時用戶點擊其他地方顯示初始化狀態(tài)
  $id("btn").onclick=function () {
   alert("我可以點擊");
  } //這邊只是試驗一下按鈕功能還在不在
  }
 </script>

這邊另外介紹一些關于搜索欄實用方法:

1.進入頁面時搜索欄已經自動獲取了焦點

那么在js之中我們只需要將對象加上  對象.focus();

方法就可以實現(xiàn)進入頁面時光標已經顯示在添加該方法的對象上。

2.鼠標進過(或點擊搜索框)搜索欄搜索欄內容被全選(該方法方便用戶輸入后鼠標經過可以直接刪除搜索欄所有,當不想刪除所有時用戶可以點擊在進行一個一個刪除操作)

對象.事件=function(){

    this.select();

}  //這樣就更便捷用戶的刪除操作

常見的(點擊后全選):

同時這邊應用到了文本框同樣也提及一下:

獲取文本框中內容:以value屬性獲取

獲取標簽中內容:innerHTML屬性獲取

搜索欄在實戰(zhàn)中運用還是很多的,這邊主要是對于焦點問題的一個介紹,當然獲取焦點方法不止這單單一種,之后小編會補充。     

當然的我們在站中看到的搜索框有更完善的

我們看一下京東的搜索框,這邊只是舉例那么現(xiàn)在很多都是用到這樣的搜索框,獲取焦點以后框內文字還是有顯示但你一輸入內容他就消失了。那么怎樣實現(xiàn)這樣的搜索框呢?

首先我們明確一點,類似這樣的搜索框顯示的文字并非是文本框的value值

話不多說擼上代碼(以小編做的那個簡單的導航框實現(xiàn)):

首先div中我們加上了label標簽,也就是我們點擊后看到的文字

然后給他加上CSS屬性(注意label標簽只能以定位的方式定位到文本框中):

.search label {
  font-size: 12px;
  color:#ccc;
  position: absolute; /*以絕對定位來定位label到文本框合適位置當然同時也要為父親div盒子加上相對定位*/
  top:12px;
  left:12px;
  cursor: text; /*使鼠標放到lable文字上時還是光標*/
 }

那么這樣的話js部分有很大差異:

<script>
  window.onload=function () {
   function $id(id) {
    return document.getElementById(id);
   }
   $id("txt").oninput=function () { //判斷用戶輸入欄是否為空來使得label是否消失
 
    if (this.value==""){
     $id("lab").style.display="block";
    }
    else {
     $id("lab").style.display="none";
    }
   }
 
  }
 </script>

效果圖如下,若輸入則淺文字消失

當然小編這個案例考慮到了一些兼容性問題,如果是在IE9后的瀏覽器用H5有的方法直接給文本框加上一個屬性就可以實現(xiàn)這樣的效果。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 詳解webpack 熱更新優(yōu)化

    詳解webpack 熱更新優(yōu)化

    這篇文章主要介紹了詳解webpack 熱更新優(yōu)化,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • JavaScript 事件對象的實現(xiàn)

    JavaScript 事件對象的實現(xiàn)

    前我寫過一篇關于JavaScript如何實現(xiàn)面向對象編程的文章。今天,我寫這篇文章跟大家討論一下,如何實現(xiàn)事件。
    2009-07-07
  • ECharts多圖表聯(lián)動功能的實現(xiàn)過程

    ECharts多圖表聯(lián)動功能的實現(xiàn)過程

    echarts是非常好用的圖表插件,下面這篇文章主要給大家介紹了關于ECharts多圖表聯(lián)動功能的相關資料,需要的朋友可以參考下
    2021-06-06
  • JavaScript作用域與作用域鏈使用重點講解

    JavaScript作用域與作用域鏈使用重點講解

    當代碼在一個環(huán)境中執(zhí)行時,會創(chuàng)建變量對象的一個作用域鏈,作用域鏈的用途是保證對執(zhí)行環(huán)境有權訪問的所有變量和函數(shù)的有序訪問,下面這篇文章主要給大家介紹了關于JavaScript作用域與作用域鏈的相關資料,需要的朋友可以參考下
    2022-10-10
  • Javascript中設置默認參數(shù)值示例

    Javascript中設置默認參數(shù)值示例

    這篇文章主要介紹了Javascript中默認參數(shù)值的設置,很簡單,但很實用,需要的朋友可以參考下
    2014-09-09
  • 在微信小程序中渲染HTML內容的方法示例

    在微信小程序中渲染HTML內容的方法示例

    這篇文章主要介紹了在微信小程序中渲染HTML內容的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • ie8下修改input的type屬性報錯的解決方法

    ie8下修改input的type屬性報錯的解決方法

    當用戶勾選顯示明文復選框時,要以明文顯示用戶輸入的密碼,去掉勾選時要變回密文,問題是ie8中是不允許修改input的type屬性
    2014-09-09
  • onkeypress字符按鍵兼容所有瀏覽器使用介紹

    onkeypress字符按鍵兼容所有瀏覽器使用介紹

    使用onkeypress字符按鍵兼容所有瀏覽器,感興趣的朋友可以參考下,希望對你學習js事件有所幫助
    2013-04-04
  • 微信小程序使用vant組件庫的詳細步驟

    微信小程序使用vant組件庫的詳細步驟

    VantWeapp是有贊團隊開源的小程序UI組件庫,可快速搭建小程序項目,小程序支持npm安裝第三方包,但需使用開發(fā)者工具構建,VantWeapp提供全局和局部注冊方式,支持自定義事件和插槽,可通過解除樣式隔離、使用外部樣式類和CSS變量修改組件樣式
    2024-09-09
  • JS實現(xiàn)隨機抽選獲獎者

    JS實現(xiàn)隨機抽選獲獎者

    這篇文章主要介紹了JS實現(xiàn)隨機抽選獲獎者,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11

最新評論