<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.input-item {
position: relative;
margin: 10px;
}
.pwd-place {
position: absolute;
top: 0;
left: 72px;
width: 100%;
height: 100%;
font-size: 12px;
}
</style>
</head>
<body>
<form action="#">
<div class="input-item">
<label for="userName">用戶名：</label>
<input class="username" id="userName" type="text" placeholder="請輸入用戶名">
</div>
<div class="input-item">
<label for="pwd">密碼：</label>
<input class=" password" id="pwd" type="password" placeholder="請輸入密碼">
<span class="pwd-place"></span>
</div>
</form>
<script src="jquery-1.11.3.js"></script>
<script>
function placeholder(el){
function isPlaceholer(){
var input = document.createElement("input");
return "placeholder" in input;
}
var $el = $(el);
if( isPlaceholer()==false && !('placeholder' in document.createElement('input')) ){
$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder');
if(that.val()===""){
if(that.attr("type") == "password"){
$el.html("請輸入密碼");
}else {
that.val(text).addClass('placeholder');
}
}
that.focus(function(){
if($el.html() == text){
$el.html("");
}
if(that.val()===text) {
that.val("").removeClass('placeholder');
}
})
.blur(function(){
if(that.val()==="") {
if (that.attr("type") == "password") {
$el.html("請輸入密碼");
}else {
that.val(text).addClass('placeholder');
}
}
})
.closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
}
}
$(document).ready(function() {
placeholder(".pwd-place")
});
</script>
</body>
</html>