關(guān)于 文本框默認(rèn)值 的操作js代碼
更新時(shí)間：2012年01月12日 10:53:05 作者：
搜索框，文本框，文本域，文本區(qū)域 可能都要有個(gè)默認(rèn)值
比如：
搜索框:可以 <input value="搜索產(chǎn)品..." />
文本區(qū)域: 可以 <textarea>輸入您多我的建議或者意見,讓我們的網(wǎng)站為您創(chuàng)造更便捷的服務(wù)....</textarea>
........
首先說這種提示功能很好，非常直觀，可是怎么讓它們獲取焦點(diǎn)時(shí)內(nèi)容清空、失去焦點(diǎn)后內(nèi)容分為空的話就顯示提示文本.....
當(dāng)頁面這些元素多了之后如何去管理...等等問題
var inputText=function(o,e,e2){
if(!o)return;var txt=o.value;
function inputTextChange(o,e,e2,txt){
o[e]=function(){var txt2=o.value;if(txt==txt2)o.value=""}
o[e2]=function(){var txt2=o.value;if(txt2=="")o.value=txt}
}
new inputTextChange(o,e,e2,txt)
}
上面我定義了一個(gè)函數(shù)
功能講解：
參數(shù) [o] : 需要操作的對(duì)象
參數(shù) [e] : 需要清空對(duì)象值的事件
參數(shù) [e2] : 需要返回默認(rèn)值的事件
函數(shù)調(diào)用：
inputText（userName,"onmouseover","onmouseout"）;
函數(shù)應(yīng)用示例：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input.value</title>
</head><body>
<script>
var inputText=function(o,e,e2){if(!o)return;var txt=o.value;
function inputTextChange(o,e,e2,txt){
o[e]=function(){var txt2=o.value;if(txt==txt2)o.value=""}
o[e2]=function(){var txt2=o.value;if(txt2=="")o.value=txt}}
new inputTextChange(o,e,e2,txt)
}
</script>
<input type="text" value="請(qǐng)輸入您的郵箱..." on />
<input type="text" value="請(qǐng)輸入您的家庭住址..." />
<input type="text" value="請(qǐng)輸入您的手機(jī)號(hào)..." />
<script>
var inputArr=document.getElementsByTagName("input")
for(var i in inputArr){
if(!inputArr[i].type=="text") continue;
inputText(inputArr[i],"onfocus","onblur")
}
</script>
</body></html>
搜索框:可以 <input value="搜索產(chǎn)品..." />
文本區(qū)域: 可以 <textarea>輸入您多我的建議或者意見,讓我們的網(wǎng)站為您創(chuàng)造更便捷的服務(wù)....</textarea>
........
首先說這種提示功能很好，非常直觀，可是怎么讓它們獲取焦點(diǎn)時(shí)內(nèi)容清空、失去焦點(diǎn)后內(nèi)容分為空的話就顯示提示文本.....
當(dāng)頁面這些元素多了之后如何去管理...等等問題
復(fù)制代碼 代碼如下:
var inputText=function(o,e,e2){
if(!o)return;var txt=o.value;
function inputTextChange(o,e,e2,txt){
o[e]=function(){var txt2=o.value;if(txt==txt2)o.value=""}
o[e2]=function(){var txt2=o.value;if(txt2=="")o.value=txt}
}
new inputTextChange(o,e,e2,txt)
}
上面我定義了一個(gè)函數(shù)
功能講解：
參數(shù) [o] : 需要操作的對(duì)象
參數(shù) [e] : 需要清空對(duì)象值的事件
參數(shù) [e2] : 需要返回默認(rèn)值的事件
函數(shù)調(diào)用：
inputText（userName,"onmouseover","onmouseout"）;
函數(shù)應(yīng)用示例：
復(fù)制代碼 代碼如下:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input.value</title>
</head><body>
<script>
var inputText=function(o,e,e2){if(!o)return;var txt=o.value;
function inputTextChange(o,e,e2,txt){
o[e]=function(){var txt2=o.value;if(txt==txt2)o.value=""}
o[e2]=function(){var txt2=o.value;if(txt2=="")o.value=txt}}
new inputTextChange(o,e,e2,txt)
}
</script>
<input type="text" value="請(qǐng)輸入您的郵箱..." on />
<input type="text" value="請(qǐng)輸入您的家庭住址..." />
<input type="text" value="請(qǐng)輸入您的手機(jī)號(hào)..." />
<script>
var inputArr=document.getElementsByTagName("input")
for(var i in inputArr){
if(!inputArr[i].type=="text") continue;
inputText(inputArr[i],"onfocus","onblur")
}
</script>
</body></html>
相關(guān)文章
使用smartupload組件實(shí)現(xiàn)jsp+jdbc上傳下載文件實(shí)例解析
這篇文章主要介紹了使用smartupload組件實(shí)現(xiàn)jsp+jdbc上傳下載文件實(shí)例解析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-01-01
OpenLayers實(shí)現(xiàn)點(diǎn)要素圖層的聚合顯示的方法
在很多情況下，點(diǎn)要素圖層中的要素?cái)?shù)量可能會(huì)成百上千，如果一個(gè)點(diǎn)要素圖層中的點(diǎn)數(shù)量很多，我們就會(huì)采取圖層聚合的方式對(duì)其進(jìn)行處理，本文就來介紹一下，感興趣的可以了解一下2021-09-09
js驗(yàn)證表單大全...2006-11-11
關(guān)于foreach循環(huán)中遇到的問題小結(jié)
這篇文章主要介紹了關(guān)于foreach循環(huán)中遇到的問題總結(jié),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄注冊(cè)界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
IE6下出現(xiàn)JavaScript未結(jié)束的字符串常量錯(cuò)誤的解決方法
JavaScript文件只在IE6下出錯(cuò)（“未結(jié)束的字符串常量”）的解決辦法。2010-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序畫布圓形進(jìn)度條顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
DOM節(jié)點(diǎn)深度克隆函數(shù)cloneNode()用法實(shí)例
這篇文章主要介紹了DOM節(jié)點(diǎn)深度克隆函數(shù)cloneNode()用法,實(shí)例分析了cloneNode()函數(shù)深度復(fù)制的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò)問題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令，對(duì)于模塊的導(dǎo)出和引入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼，需要的朋友可以參考下。2011-07-07