<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.placeholder{ color:#999;}
</style>
<script src="jquery-3.2.0.min.js"></script><!--需引入jQuery-->
<!--[if lte IE 9]>
<script>
// 兼容ie9的placeholder
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
}
if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input绑定事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")){
$(this).val("");
$(this).removeClass("placeholder");
}
});
$(this).blur(function(){
if($(this).val()==""){
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
}
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
$("input[type='password']").each(
function() {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input class="login-input" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $(this).siblings('.login-input');
pwdPlaceholder.addClass("placeholder");
pwdPlaceholder.show();
pwdPlaceholder.addClass($(pwdField).attr('class'))
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
})
}
});
}
// end
</script>
<![endif]-->
</head>
<body>
<p>hello world</p>
<input type="text" placeholder="请输入验证码"><br>
<input type="password" placeholder="请输入密码">
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.placeholder{ color:#999;}
</style>
<script src="jquery-3.2.0.min.js"></script><!--需引入jQuery-->
<!--[if lte IE 9]>
<script>
// 兼容ie9的placeholder
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
}
if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input绑定事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")){
$(this).val("");
$(this).removeClass("placeholder");
}
});
$(this).blur(function(){
if($(this).val()==""){
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
}
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
$("input[type='password']").each(
function() {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input class="login-input" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $(this).siblings('.login-input');
pwdPlaceholder.addClass("placeholder");
pwdPlaceholder.show();
pwdPlaceholder.addClass($(pwdField).attr('class'))
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
})
}
});
}
// end
</script>
<![endif]-->
</head>
<body>
<p>hello world</p>
<input type="text" placeholder="请输入验证码"><br>
<input type="password" placeholder="请输入密码">
</body>
</html>