js實(shí)現(xiàn)搜索欄效果
小編這邊主要是介紹一個(gè)js中搜索欄的實(shí)現(xiàn)(沒有提交數(shù)據(jù)那些),重點(diǎn)在于對焦點(diǎn)問題的理解。
那么這邊小編就是要實(shí)現(xiàn)這樣的一個(gè)搜索框
對焦點(diǎn)的理解:
通俗來講當(dāng)我們鼠標(biāo)單擊一個(gè)盒子時(shí)光標(biāo)停留在該盒子事件上實(shí)現(xiàn)用戶與欄之間的交互,這樣就表明該盒子獲取了焦點(diǎn),以案例來說我們平常搜索欄點(diǎn)擊可以輸入文字,這個(gè)時(shí)候該搜索欄就獲得了焦點(diǎn)。
同理失去焦點(diǎn)也是同樣當(dāng)點(diǎn)擊頁面其余位置時(shí)失去對先前盒子可以進(jìn)行的操作。
那么直接以小編這個(gè)案例來說代碼如下:
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"> //盒子架構(gòu)div中一個(gè)文本框一個(gè)按鈕 <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=""; //這邊是賦值別搞錯(cuò)了 this.style.color="#333"; //黑色 } } //當(dāng)用戶點(diǎn)擊時(shí)初始文字消失 $id("txt").onblur=function () { if (this.value==""){ this.value="請輸入..." this.style.color="#ccc"; //透明灰 } //誰調(diào)用this指向誰 }//當(dāng)為空時(shí)用戶點(diǎn)擊其他地方顯示初始化狀態(tài) $id("btn").onclick=function () { alert("我可以點(diǎn)擊"); } //這邊只是試驗(yàn)一下按鈕功能還在不在 } </script>
這邊另外介紹一些關(guān)于搜索欄實(shí)用方法:
1.進(jìn)入頁面時(shí)搜索欄已經(jīng)自動(dòng)獲取了焦點(diǎn)
那么在js之中我們只需要將對象加上 對象.focus();
方法就可以實(shí)現(xiàn)進(jìn)入頁面時(shí)光標(biāo)已經(jīng)顯示在添加該方法的對象上。
2.鼠標(biāo)進(jìn)過(或點(diǎn)擊搜索框)搜索欄搜索欄內(nèi)容被全選(該方法方便用戶輸入后鼠標(biāo)經(jīng)過可以直接刪除搜索欄所有,當(dāng)不想刪除所有時(shí)用戶可以點(diǎn)擊在進(jìn)行一個(gè)一個(gè)刪除操作)
對象.事件=function(){
this.select();
} //這樣就更便捷用戶的刪除操作
常見的(點(diǎn)擊后全選):
同時(shí)這邊應(yīng)用到了文本框同樣也提及一下:
獲取文本框中內(nèi)容:以value屬性獲取
獲取標(biāo)簽中內(nèi)容:innerHTML屬性獲取
搜索欄在實(shí)戰(zhàn)中運(yùn)用還是很多的,這邊主要是對于焦點(diǎn)問題的一個(gè)介紹,當(dāng)然獲取焦點(diǎn)方法不止這單單一種,之后小編會(huì)補(bǔ)充。
當(dāng)然的我們在站中看到的搜索框有更完善的
我們看一下京東的搜索框,這邊只是舉例那么現(xiàn)在很多都是用到這樣的搜索框,獲取焦點(diǎn)以后框內(nèi)文字還是有顯示但你一輸入內(nèi)容他就消失了。那么怎樣實(shí)現(xiàn)這樣的搜索框呢?
首先我們明確一點(diǎn),類似這樣的搜索框顯示的文字并非是文本框的value值
話不多說擼上代碼(以小編做的那個(gè)簡單的導(dǎo)航框?qū)崿F(xiàn)):
首先div中我們加上了label標(biāo)簽,也就是我們點(diǎn)擊后看到的文字
然后給他加上CSS屬性(注意label標(biāo)簽只能以定位的方式定位到文本框中):
.search label { font-size: 12px; color:#ccc; position: absolute; /*以絕對定位來定位label到文本框合適位置當(dāng)然同時(shí)也要為父親div盒子加上相對定位*/ top:12px; left:12px; cursor: text; /*使鼠標(biāo)放到lable文字上時(shí)還是光標(biāo)*/ }
那么這樣的話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>
效果圖如下,若輸入則淺文字消失
當(dāng)然小編這個(gè)案例考慮到了一些兼容性問題,如果是在IE9后的瀏覽器用H5有的方法直接給文本框加上一個(gè)屬性就可以實(shí)現(xiàn)這樣的效果。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ECharts多圖表聯(lián)動(dòng)功能的實(shí)現(xiàn)過程
echarts是非常好用的圖表插件,下面這篇文章主要給大家介紹了關(guān)于ECharts多圖表聯(lián)動(dòng)功能的相關(guān)資料,需要的朋友可以參考下2021-06-06JavaScript作用域與作用域鏈?zhǔn)褂弥攸c(diǎn)講解
當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí),會(huì)創(chuàng)建變量對象的一個(gè)作用域鏈,作用域鏈的用途是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問,下面這篇文章主要給大家介紹了關(guān)于JavaScript作用域與作用域鏈的相關(guān)資料,需要的朋友可以參考下2022-10-10Javascript中設(shè)置默認(rèn)參數(shù)值示例
這篇文章主要介紹了Javascript中默認(rèn)參數(shù)值的設(shè)置,很簡單,但很實(shí)用,需要的朋友可以參考下2014-09-09ie8下修改input的type屬性報(bào)錯(cuò)的解決方法
當(dāng)用戶勾選顯示明文復(fù)選框時(shí),要以明文顯示用戶輸入的密碼,去掉勾選時(shí)要變回密文,問題是ie8中是不允許修改input的type屬性2014-09-09