javascript和jquery實(shí)現(xiàn)設(shè)置和移除文本框默認(rèn)值效果代碼
這里想實(shí)現(xiàn)的效果是：設(shè)置和移除文本框默認(rèn)值，如下圖鼠標(biāo)放到文本框中的時(shí)候，灰字消失。
1.可以用簡(jiǎn)單的方式，就是給input文本框加上onfocus屬性，如下代碼：
<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="請(qǐng)輸入關(guān)鍵字進(jìn)行搜索"
onfocus='if(this.value=="請(qǐng)輸入關(guān)鍵字進(jìn)行搜索"){this.value="";}; '
onblur='if(this.value==""){this.value="請(qǐng)輸入關(guān)鍵字進(jìn)行搜索";};'>
其實(shí)onfocus屬性挺好用的，還可以在通過(guò)onfocus屬性改變css樣式，如下代碼：
<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="請(qǐng)輸入關(guān)鍵字進(jìn)行搜索"
onfocus='if(this.value=="請(qǐng)輸入關(guān)鍵字進(jìn)行搜索"){this.value="";}; this.className="input01"'
onblur='if(this.value==""){this.value="請(qǐng)輸入關(guān)鍵字進(jìn)行搜索";}; this.className="input02"'>
2.也可以使用jquery實(shí)現(xiàn)：
$(document).ready(function() {
var vdefault = $('#keyword').val();
$('#keyword').focus(function() {
//獲得焦點(diǎn)時(shí)，如果值為默認(rèn)值，則設(shè)置為空
if ($(this).val() == vdefault) {
$(this).val("");
}
});
$('#keyword').blur(function() {
//失去焦點(diǎn)時(shí)，如果值為空，則設(shè)置為默認(rèn)值
if ($(this).val()== "") {
$(this).val(vdefault); ;
}
});
});
當(dāng)然實(shí)現(xiàn)的方式還有很多種，這里只是我使用過(guò)的...
相關(guān)文章
因?yàn)镴avaScript具有自動(dòng)垃圾回收機(jī)制，所以對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，內(nèi)存空間并不是一個(gè)經(jīng)常被提及的概念。特別是很多不是計(jì)算機(jī)專(zhuān)業(yè)的朋友在進(jìn)入到前端之后，會(huì)對(duì)內(nèi)存空間的認(rèn)知比較模糊，甚至有些人干脆就是一無(wú)所知。為了解決大家的疑惑，本文將詳細(xì)介紹JS內(nèi)存空間2021-06-06
解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題
下面小編就為大家分享一篇解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序下拉框組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了js用類(lèi)封裝pop彈窗組件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
火狐瀏覽器(firefox)下獲得Event對(duì)象以及keyCode
firefox Event對(duì)象2008-11-11
ff和ie6下都是同樣的運(yùn)行結(jié)果,看來(lái)不是bug,那究竟是為什么呢？ 注意到：對(duì)象方法訪(fǎng)問(wèn)其對(duì)象的屬性時(shí)|必須|加以this.(和java不一樣).2008-11-11
js中base64、url和blob之間相互轉(zhuǎn)換的3種方式(詳細(xì)代碼)
這篇文章主要給大家介紹了關(guān)于js中base64、url和blob之間相互轉(zhuǎn)換的3種方式,Blob和File是用來(lái)表示二進(jìn)制數(shù)據(jù)的,而B(niǎo)ase64則是一種編碼方式,用來(lái)把二進(jìn)制數(shù)據(jù)編碼成可讀的字符串,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了JS正則表達(dá)式獲取分組內(nèi)容的方法，有需要的朋友可以參考一下2013-11-11
JavaScript實(shí)現(xiàn)帶標(biāo)題的圖片輪播特效
這里給大家分享的是4屏帶標(biāo)題和文字描述的js圖片輪播代碼，完美兼容IE6。圖片滾動(dòng)切換，鼠標(biāo)放到數(shù)字選項(xiàng)卡即可切換圖片。點(diǎn)擊圖片跳轉(zhuǎn)到指定頁(yè)面，有需要的小伙伴可以參考下。2015-05-05
Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法
這篇文章主要介紹了Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法,實(shí)例分析了js針對(duì)表單節(jié)點(diǎn)進(jìn)行添加操作的常用技巧,需要的朋友可以參考下2015-02-02