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ì)有所幫助。
您可能感興趣的文章:
- 基于JS實(shí)現(xiàn)html中placeholder屬性提示文字效果示例
- js兼容的placeholder屬性詳解
- 讓低版本瀏覽器支持input的placeholder屬性(js方法)
- js模仿html5 placeholder適應(yīng)于不支持的瀏覽器
- javascript 文本框水印/占位符(watermark/placeholder)實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)輸入框提示文字點(diǎn)擊時(shí)消失效果
- js+css實(shí)現(xiàn)增加表單可用性之提示文字
- JavaScript實(shí)現(xiàn)的文本框placeholder提示文字功能示例
相關(guān)文章
JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)
這篇文章主要介紹了JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教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最大的一個(gè)特點(diǎn)就是變量是強(qiáng)類型的,也就是說在聲明變量的時(shí)候我們必須給他一個(gè)類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript語法詳解之類型操作的補(bǔ)充,需要的朋友可以參考下2022-08-08
這篇文章介紹了intro.js 頁面引導(dǎo)簡單用法，有需要的朋友可以參考一下2013-08-08
JavaScript 日期時(shí)間選擇器一些小結(jié)
flatpickr 是一個(gè)輕量級、注重精益、由 UX 驅(qū)動和可擴(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ū)別詳解的相關(guān)資料,非常不錯，具有參考借鑒價(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通訊測試,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04