快捷導(dǎo)航

js顯示文本框提示文字的方法

更新時(shí)間：2015年05月07日 15:23:01 投稿：shichen2014

這篇文章主要介紹了js顯示文本框提示文字的方法,涉及javascript鼠標(biāo)事件及樣式操作的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了js顯示文本框提示文字的方法。分享給大家供大家參考。具體實(shí)現(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>js提示文字</title>
<style type="text/css">
input{
width:200px; height:24px;
line-height:24px; border:1px solid #999;
background:#ccc; margin:15px 0 0 100px;
padding:4px; color:#666;
}
.current{
background:#E0FEE4;
border:1px solid #093;
}
</style>
</head>
<body>
<input name="" type="text" value="請輸入姓名："/><br />
<input name="" type="text" value="請輸入昵稱："/><br />
<input name="" type="text" value="輸入驗(yàn)證碼："/><br />
<input name="" type="text" value="請輸入手機(jī)號碼："/><br />
<input name="" type="text" value="請輸入電子郵件："/>
<script type="text/javascript">
 var aInp=document.getElementsByTagName('input');
 var i=0;
 var sArray=[];
 for(i=0; i<aInp.length; i++)
 {
 aInp[i].index=i;
 sArray.push(aInp[i].value);
 aInp[i].onfocus=function()
 {
 if(sArray[this.index]==aInp[this.index].value)
 {
 aInp[this.index].value='';
 }
 aInp[this.index].className='current';
 };
 aInp[i].onblur=function()
 {
 if(aInp[this.index].value=='')
 {
 aInp[this.index].value=sArray[this.index];
 }
 aInp[this.index].className='';
 };
 }
</script>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)
這篇文章主要介紹了JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解微信小程序?qū)崿F(xiàn)仿微信聊天界面(各種細(xì)節(jié)處理)
這篇文章主要介紹了詳解微信小程序?qū)崿F(xiàn)仿微信聊天界面(各種細(xì)節(jié)處理)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
JS笛卡爾積算法與多重?cái)?shù)組笛卡爾積實(shí)現(xiàn)方法示例
這篇文章主要介紹了JS笛卡爾積算法與多重?cái)?shù)組笛卡爾積實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript根據(jù)對象或數(shù)組生成笛卡爾積的相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
TypeScript語法詳解之類型操作的補(bǔ)充
TypeScript最大的一個(gè)特點(diǎn)就是變量是強(qiáng)類型的,也就是說在聲明變量的時(shí)候我們必須給他一個(gè)類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript語法詳解之類型操作的補(bǔ)充,需要的朋友可以參考下
2022-08-08
intro.js 頁面引導(dǎo)簡單用法分享
這篇文章介紹了intro.js 頁面引導(dǎo)簡單用法，有需要的朋友可以參考一下
2013-08-08
JavaScript 日期時(shí)間選擇器一些小結(jié)
flatpickr 是一個(gè)輕量級、注重精益、由 UX 驅(qū)動(dòng)和可擴(kuò)展的 JavaScript 日期時(shí)間選擇器。這篇文章主要介紹了JavaScript 日期時(shí)間選擇器,需要的朋友可以參考下
2018-04-04
Pro JavaScript Techniques學(xué)習(xí)筆記
Pro JavaScript Techniques學(xué)習(xí)筆記，學(xué)習(xí)js的朋友可以參考下。
2010-12-12
JavaScript里 ==與===區(qū)別詳解
這篇文章主要介紹了JavaScript里 ==與===區(qū)別詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
利用Three.js如何實(shí)現(xiàn)陰影效果實(shí)例代碼
使用three.js可以方便的讓我們在網(wǎng)頁中做出各種不同的3D效果，下面這篇文章主要給大家介紹了關(guān)于利用Three.js如何實(shí)現(xiàn)陰影效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
詳解JS HTML Web端使用MQTT通訊測試
這篇文章主要介紹了JS HTML Web端使用MQTT通訊測試,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04