@海纳百川 你好,想跟你请教个问题:
http://runjs.cn/detail/ojm8jis7 placeholder 的这个问题,我把你的代码都copy下来,做了已经静态页面,但是在IE9以下都看不到效果。不知道是什么问题。
代码如下:(copy你的jq库,IE低版本显示jQuery未定义,所以我用了我本地的一个库)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder</title>
</head>
<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>
<script type="text/javascript" class="library" src="./jquery.min.1.7.1.js"></script>
<script>
(function ($) {
$.fn.placeholder = function () {
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,
'top': document.all ? position.top - 7 : 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();
}
var textarea = $('#message');
$('#add').on('click', function(){
textarea.val('这是留言内容');
});
$('#remove').on('click', function(){
textarea.val('');
});
</script>
<body>
<form>
<div class="input-row">当前密码:
<input class="input input-text" type="password" name="password" placeholder="当前密码">
</div>
<div class="input-row"> 新密码:
<input class="input input-text" type="password" name="password" 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>
多谢多谢。