javascript搜索框效果實現(xiàn)方法
更新時間：2015年05月14日 09:54:24 作者：永遠(yuǎn)愛好寫程序
這篇文章主要介紹了javascript搜索框效果實現(xiàn)方法,可實現(xiàn)顯示默認(rèn)提示文字的搜索框效果,非常簡單實用,需要的朋友可以參考下
本文實例講述了javascript搜索框效果實現(xiàn)方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索框效果</title>
<script type="text/javascript">
function iniEvent() {
var txtSearch = document.getElementById("txtSearch");
txtSearch.onfocus = function () {
if (this.value == "請輸入關(guān)鍵字" || this.value == "") {
this.value = "";
this.style.color = "black"; //修改文本框字體顏色
}
}
txtSearch.onblur = function () {
if (this.value == "請輸入關(guān)鍵字" || this.value == "") {
this.value = "請輸入關(guān)鍵字";
this.style.color = "red"; //修改文本框字體顏色
}
else {
this.style.color = "black";
}
}
}
</script>
</head>
<body onload="iniEvent()">
<!--文字離開如果文本框為空則顯示紅色的"請輸入關(guān)鍵字"-->
<!--<label for="txtSearch">查找</label>
<input type="text" id="txtSearch" value="請輸入關(guān)鍵字"
style="color:red" />-->
查找<input type="text" id="txtSearch" value="請輸入關(guān)鍵字"
style="color:red" /><br /><input type="text" />
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS截取與分割字符串常用技巧,以實例形式分析你了JavaScript針對字符串的截取與分割常用函數(shù)的定義、功能及使用技巧,并補充分析了substr和substring方法的區(qū)別,需要的朋友可以參考下2015-11-11
本文給大家通過3個方法向大家展示了javascript中的setTimeout的使用，非常的簡單，有需要的小伙伴可以參考下。2015-07-07
js編寫trim()函數(shù)及正則表達(dá)式的運用
js中本身是沒有trim函數(shù)的，不過你可以自己寫一個，下面的實現(xiàn)方法是用到了正則表達(dá)式，效率不錯，并把這三個方法加入String對象的內(nèi)置方法中去2013-10-10
WebApi+Bootstrap+KnockoutJs打造單頁面程序
這篇文章主要介紹了WebApi+Bootstrap+KnockoutJs打造單頁面程序的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)車輛管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了詳解require.js配置路徑的用法和css的引入,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
JavaScript中的splice主要用來對js中的數(shù)組進(jìn)行操作，包括刪除，添加，替換等。這篇文章主要介紹了JavaScript中的splice方法用法詳解的相關(guān)資料,需要的朋友可以參考下2016-07-07
避免 showModalDialog 彈出新窗體的原因分析,一般情況下需要返回值用window.open.2010-05-05
這篇文章主要介紹了JavaScript中的flat()和flatMap()方法,解釋了它們的功能、使用方法和應(yīng)用場景,flat()用于將嵌套數(shù)組壓平,而flatMap()則是在壓平的同時對每個元素進(jìn)行轉(zhuǎn)換,需要的朋友可以參考下2024-11-11
JavaScript 實現(xiàn)類的多種方法實例，需要的朋友可以參考一下2013-05-05