JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法
更新時(shí)間：2015年07月01日 12:20:01 作者：不吃皮蛋
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法,涉及javascript針對(duì)頁(yè)面元素樣式及屬性的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法。分享給大家供大家參考。具體如下：
html代碼：
<form name="searchform" id="search-form">
<div>
<b>Search</b>
<input type="text" name="txtInput"
title="Enter the terms you wish to search for." />
<input type="submit" value="GO!" class="submit"
style="cursor: pointer;" />
</div>
</form>
JS代碼：
<script type="text/javascript" language="javascript">
(function() {
var id = document.getElementById('search-form');
if (id && id.txtInput) {
var name = id.txtInput;
var unclicked = function() {
if (name.value == '') {
name.style.background = '#FFFFFF url(images/googbg.png) left no-repeat';
}
};
var clicked = function() {
name.style.background = '#ffffff';
};
name.onfocus = clicked;
name.onblur = unclicked;
unclicked();
}
})();
</script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
本文,我們來(lái)講講如何使用 JavaScript 實(shí)現(xiàn)圖片的縮放,當(dāng)然,我們可以類比到其他的元素,比如視頻的縮放,文中有詳細(xì)的代碼示例,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了微信小程序wxml列表渲染原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
JavaScript中檢測(cè)變量是否存在遇到的一些問(wèn)題
要檢測(cè)某一變量是否存在，雖然簡(jiǎn)單但是也要細(xì)心，下面整理了幾點(diǎn)，遇到類似問(wèn)題的朋友可以參考下2013-11-11
JavaScript中call、apply、bind實(shí)現(xiàn)原理詳解
其實(shí)在很多文章都會(huì)寫(xiě)call，apply，bind,但個(gè)人覺(jué)著如果不弄懂原理,是很難理解透的,所以這篇文章主要介紹了JavaScript中call、apply、bind實(shí)現(xiàn)原理的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細(xì)介紹了openlayers實(shí)現(xiàn)地圖彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了js獲取頁(yè)面description的方法,涉及javascript操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
前端實(shí)現(xiàn)全局主題切換功能實(shí)例代碼
這篇文章主要介紹了如何使用ReactHook和Context實(shí)現(xiàn)全局主題切換的功能,通過(guò)創(chuàng)建一個(gè)Context對(duì)象和一個(gè)ThemeProvider組件,可以將當(dāng)前主題存儲(chǔ)在Context中,并提供一個(gè)切換主題的方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2025-03-03
這篇文章主要給大家介紹了關(guān)于用JS獲取Headers頭部信息的相關(guān)資料,頭部信息是在JavaScript中進(jìn)行網(wǎng)絡(luò)請(qǐng)求時(shí)常用的操作,Headers 頭部信息包含了請(qǐng)求或響應(yīng)的元數(shù)據(jù),需要的朋友可以參考下2023-09-09
JS實(shí)現(xiàn)簡(jiǎn)易留言板（節(jié)點(diǎn)操作）
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易留言板，節(jié)點(diǎn)進(jìn)行操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript優(yōu)雅處理對(duì)象的6種方法
大家好，本篇文章主要講的是JavaScript優(yōu)雅處理對(duì)象的6種方法，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下哦，方便下次瀏覽2021-12-12