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

2024-05-06 16:19:38

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了js显示文本框提示文字的方法,涉及javascript鼠标事件及样式操作的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了js显示文本框提示文字的方法。分享给大家供大家参考。具体实现方法如下：

<!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>