首页 > 代码库 > 给input文本框添加灰色提示文字,三种方法.
给input文本框添加灰色提示文字,三种方法.
1.这个是HTML5的属性. h5的好简单....
placeholder="这里输入文字"
2.HTML的:
value="http://www.mamicode.com/你的提示文字" onFocus="if(value=http://www.mamicode.com/=defaultValue){value=‘‘;this.style.color=‘#000‘}" onBlur="if(!value){value=http://www.mamicode.com/defaultValue;this.style.color=‘#999‘}" style="color:#999999"
3.度娘的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="http://www.mamicode.com/请输入姓名：" />
<br />
<input name="" type="text" value="http://www.mamicode.com/请输入昵称：" />
<br />
<input name="" type="text" value="http://www.mamicode.com/输入验证码：" />
<br />
<input name="" type="text" value="http://www.mamicode.com/请输入手机号码：" />
<br />
<input name="" type="text" value="http://www.mamicode.com/请输入电子邮件：" />
<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 = http://www.mamicode.com/‘‘;
}
aInp[this.index].className = ‘current‘;
};
aInp[i].onblur = function() {
if (aInp[this.index].value =http://www.mamicode.com/= ‘‘) {
aInp[this.index].value = http://www.mamicode.com/sArray[this.index];
}
aInp[this.index].className = ‘‘;
};
}
</script>
</body>
</html>
给input文本框添加灰色提示文字,三种方法.