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