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)文章
JavaScript彈出新窗口并控制窗口移動(dòng)到指定位置的方法
這篇文章主要介紹了JavaScript彈出新窗口并控制窗口移動(dòng)到指定位置的方法,涉及javascript針對(duì)彈出窗口的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)表格單列按字母排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript中日期函數(shù)的相關(guān)操作知識(shí)
日期函數(shù)是我們經(jīng)常用到的知識(shí)點(diǎn)，下面通過(guò)本文給大家介紹JavaScript中日期函數(shù)的相關(guān)操作知識(shí)，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
Javascript繼承機(jī)制的設(shè)計(jì)思想分享
我花了很多時(shí)間，學(xué)習(xí)這個(gè)部分，還做了很多筆記。但是都屬于強(qiáng)行記憶，無(wú)法從根本上理解。2011-08-08
基于JavaScript實(shí)現(xiàn)類似于百度學(xué)術(shù)高級(jí)檢索功能
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)類似于百度學(xué)術(shù)高級(jí)檢索功能 的相關(guān)資料,需要的朋友可以參考下2016-03-03
仿谷歌主頁(yè)js動(dòng)畫效果實(shí)現(xiàn)代碼
昨天看到谷歌的主頁(yè)上出現(xiàn)了幾個(gè)動(dòng)畫，發(fā)現(xiàn)不是flash做的，而是用js+圖片實(shí)現(xiàn)的！今天把拷貝到的圖片，用js實(shí)現(xiàn)了動(dòng)畫效果！2013-07-07
JavaScript中的公有、私有、特權(quán)和靜態(tài)成員用法分析
這篇文章主要介紹了JavaScript中的公有、私有、特權(quán)和靜態(tài)成員用法,以實(shí)例形式分析了其使用方法,簡(jiǎn)單易懂,對(duì)于初學(xué)javascript的朋友具有不錯(cuò)的學(xué)習(xí)與借鑒價(jià)值,需要的朋友可以參考下2014-11-11
前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法總結(jié)
在JavaScript中實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能是一項(xiàng)常見的需求,特別是在網(wǎng)頁(yè)交互設(shè)計(jì)中,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法,需要的朋友可以參考下2024-06-06
javascript中關(guān)于&& 和 || 表達(dá)式的小技巧分享
我將會(huì)介紹和解析12個(gè)簡(jiǎn)單但是強(qiáng)大的JavaScript技巧. 這些技巧所有的JavaScript程序員都可以馬上使用, 你不需要成為JavaScript高手才能理解這些.下面我們開始本系列的第一篇文章，介紹下強(qiáng)大的&& 和 || 表達(dá)式2015-04-04
uniapp是2019年火爆的一個(gè)Dcloud開發(fā)跨平臺(tái)前端工具,下面這篇文章主要給大家介紹了關(guān)于uniapp添加車牌組件的實(shí)現(xiàn)與使用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05