给input文本框添加灰色提示文字,三种方法.

最新推荐文章于 2022-11-17 10:44:37 发布

weixin_30491641

最新推荐文章于 2022-11-17 10:44:37 发布

阅读量850

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/orac/p/6207048.html

版权

1.这个是HTML5的属性. h5的好简单....

placeholder="这里输入文字"

2.HTML的:

value="你的提示文字" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=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="请输入姓名：" />
<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>

转载于:https://www.cnblogs.com/orac/p/6207048.html

weixin_30491641

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
给input文本框添加灰色提示文字,三种方法.

1.这个是HTML5的属性. h5的好简单....placeholder="这里输入文字"2.HTML的:value="你的提示文字" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color=...
复制链接

扫一扫