html中input文本框，初始里边有文字提示，当点击时，文字消失，怎么设置？
已赞过
已踩过<
使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:
<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入内容')this.value='';">
单纯的文本框：（通常用用户名之类的）
<input type="text" name="username" id="username" style=" width:270px; height:54px; font-size:18px; line-height:54px;" value="请输入您的帐号" onFocus="if(value=='请输入您的帐号') {value=''}" onBlur="if(value==''){value='请输入您的帐号'}">
密码状态时 中上面的方法会显示不出字 而是默认的星号或者点 所以用下面的实现
密码框默认有字 鼠标点击后默认字消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
#inputs{width:300px;margin:50px auto;border:solid 1px #090;}
#password{display:none;}
</style>
<body>
<div id="inputs">
<input id="password" type="password" />
<input id="password_text" type="text" value="请输入密码" />
</div>
<script type="text/javascript">
window.onload=function(){
var pwd = document.getElementByIdx_x("password");
var pwd_text = document.getElementByIdx_x("password_text");
pwd_text.onfocus = function(){
pwd.style.display = "inline";
pwd_text.style.display = "none";
pwd.focus();
}
pwd.onblur=function(){
if(pwd.value==null || pwd.value=="" || pwd.value=="请输入密码"){
pwd.style.display="none";
pwd_text.style.display="inline";
}
}
}
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<input id="input" placeholder autocomplete="off"><!--这里取消了自动补全(autocomplete)-->
<script>
var str ="请输入内容...";//这里是显示提示文字的字符串
var input = document.getElementById("input");
input.placeholder=str;
input.onblur=function(){
this.placeholder=str;
}
input.onfocus=function(){
this.placeholder="";
}
</script>
<!--别问我script为什么放在body,因为,放在head不能实现还有错误.-->
</body>
</html>
