<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="css/reset.css" />
<style type="text/css">
#main {
border: 1px solid red;
width: 90%;
height: 100%;
margin: 0 auto;
}
.hearder {
margin: 20px 0px;
font-size: 14px;
font-weight: bold;
color: red;
}
.dd {
color: red;
width: 200px;
height: 100px;
text-align: right;
}
input {
width: 200px;
height: 50px;
margin: 0 20px;
}
</style>
</head>
<body>
<input type="text" id="Password1" name="Password1" value="密码(6-16位字母数字组合)" maxlength="30" />
<input type="text" name="password2" id="Password2" value="确认密码" />
<script type="text/javascript">
$('#Password1').on('focus',function(){
if($(this).val()=='密码(6-16位字母数字组合)'){
$(this).val('');
$(this).attr('type','password');
}
});
$('#Password1').on('blur',function(){
if($(this).val()==''){
$(this).val('密码(6-16位字母数字组合)');
$(this).attr('type','text');
}
});
$('#Password2').on('focus',function(){
if($(this).val()=='确认密码'){
$(this).val('');
$(this).attr('type','password');
}
});
$('#Password2').on('blur',function(){
if($(this).val()==''){
$(this).val('确认密码');
$(this).attr('type','text');
}
});
</script>
</body>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="css/reset.css" />
<style type="text/css">
#main {
border: 1px solid red;
width: 90%;
height: 100%;
margin: 0 auto;
}
.hearder {
margin: 20px 0px;
font-size: 14px;
font-weight: bold;
color: red;
}
.dd {
color: red;
width: 200px;
height: 100px;
text-align: right;
}
input {
width: 200px;
height: 50px;
margin: 0 20px;
}
</style>
</head>
<body>
<input type="text" id="Password1" name="Password1" value="密码(6-16位字母数字组合)" maxlength="30" />
<input type="text" name="password2" id="Password2" value="确认密码" />
<script type="text/javascript">
$('#Password1').on('focus',function(){
if($(this).val()=='密码(6-16位字母数字组合)'){
$(this).val('');
$(this).attr('type','password');
}
});
$('#Password1').on('blur',function(){
if($(this).val()==''){
$(this).val('密码(6-16位字母数字组合)');
$(this).attr('type','text');
}
});
$('#Password2').on('focus',function(){
if($(this).val()=='确认密码'){
$(this).val('');
$(this).attr('type','password');
}
});
$('#Password2').on('blur',function(){
if($(this).val()==''){
$(this).val('确认密码');
$(this).attr('type','text');
}
});
</script>
</body>
</html>
解决办法就是：在前面加input 元素，只有第一个有默认值
