ie兼容html5中placeholder属性

浏览数：25 / 时间：2015年06月09日

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder</title>
<script id="jquery_183" type="text/javascript" class="library" src="C:/Users/Administrator/Desktop/jquery-1.9.1.min.js"></script>
</head>

<body>
<form>
<div class="input-row">帐号：
<input id="account" class="input input-text" type="text" name="account" placeholder="请输入帐号">
</div>
<div class="input-row">密码：
<input class="input input-text" type="password" name="password" placeholder="请输入密码">
</div>
<div class="input-row">留言：
<textarea id="message" name="message" rows="3" class="input" data-class="textarea" placeholder="请输入留言"></textarea>
</div>
<input type="button" id="add" value="填写留言"/>
<input type="button" id="remove" value="删除留言"/>
</form>
</body>
</html>

<style>
body, .input { font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 2; }
body { background-color:#fff; }
.input-row { margin-bottom: 10px; }
.input { line-height: 24px; border: solid 1px #ddd; padding: 5px; width: 300px; vertical-align: middle; margin:0; }
.input-text { height: 24px; }
.input:focus { border-color: #999; }
::-webkit-input-placeholder { color:#999; }
::-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999;}
label.placeholder { color:#999; display: inline-block; padding: 6px; }
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
[placeholder]:focus::-moz-placeholder { opacity: 0; }
</style>

return this.each(function (index) {
var input = $(this);

var inputParent = input.parent();
if(inputParent.css(‘position‘) === ‘static‘){
inputParent.css(‘position‘, ‘relative‘);
}

var inputId = input.attr(‘id‘);
if (!inputId) {
inputId = ‘placeholder‘ + index;
input.attr(‘id‘, inputId);
}

var label = $(‘<label class="placeholder"></label>‘);
label.attr(‘for‘, inputId);
label.text(input.attr(‘placeholder‘));

labelClass = input.data(‘class‘);
if(labelClass){
label.addClass(labelClass);
}

var position = input.position();
label.css({
‘position‘: ‘absolute‘,
‘top‘: position.top,
‘left‘: position.left,
‘cursor‘:‘text‘
});

if (this.value.length) {
label.hide();
}

input.after(label);

input.on({
focus: function () {
label.hide();
},
blur: function () {
if (this.value == ‘‘) {
label.show();
}
}
});

this.attachEvent(‘onpropertychange‘, function(){
input.val() ? label.hide() : label.show();
});
})
}
})(jQuery);

if(!("placeholder" in document.createElement("input"))){
$(‘:input[placeholder]‘).placeholder();
$(‘#account‘).on(‘blur‘, function(){
alert($(‘#account‘).val());
});
}

var textarea = $(‘#message‘);

$(‘#add‘).on(‘click‘, function(){
textarea.val(‘这是留言内容‘);
});

$(‘#remove‘).on(‘click‘, function(){
textarea.val(‘‘);
});