javascript搜索框效果實現(xiàn)方法
更新時間：2015年05月14日 09:54:24 作者：永遠愛好寫程序
這篇文章主要介紹了javascript搜索框效果實現(xiàn)方法,可實現(xià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)文章
JavaScript 中調(diào)用 Kotlin 方法實例詳解
這篇文章主要介紹了JavaScript 中調(diào)用 Kotlin 方法實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了javascript框架設(shè)計之類工廠的相關(guān)資料,非常淺顯易懂，有需要的小伙伴可以查看下。2015-06-06
這篇文章主要為大家詳細介紹了JS組件Bootstrap Table布局，用戶體驗比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2016-05-05
基于JavaScript實現(xiàn)Json數(shù)據(jù)根據(jù)某個字段進行排序
這篇文章主要介紹了基于JavaScript實現(xiàn)Json數(shù)據(jù)根據(jù)某個字段進行排序的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了在調(diào)用jQuery 滑出效果時，層會現(xiàn)次閃爍一下的解決方法,需要的朋友可以參考下2014-03-03
在寫項目時,難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進行驗證及必填項提示,圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽,這篇文章給大家介紹el-form實現(xiàn)表單和圖片手動上傳和校驗功能,感興趣的朋友一起看看吧2024-01-01
下面小編就為大家?guī)硪黄褂肧VG基本操作API的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09 
css文件可以用js 動態(tài)修改，在做一些交互動作時，非常實用，下面是具體示例，大家可以看看
2014-08-08 
本文記錄下JS中產(chǎn)生標(biāo)識符方式的演變，從ES5到ES6，ES5及其之前是一種方式，只包含兩種聲明（var/function），ES6則增加了一些產(chǎn)生標(biāo)識符的關(guān)鍵字，如 let、const、class。
2015-06-06