placeholder在IE低版本兼容

Elina_lxt 发布于 2014/10/10 16:13
阅读 481
收藏 0

@海纳百川 你好,想跟你请教个问题:

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">&nbsp;&nbsp;&nbsp;新密码:
        <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">留&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;言:
        <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>



希望大神能给我指点一二,这个问题困扰我好久了。

多谢多谢。


加载中
0
海纳百川
海纳百川
你把jQuery换成最新版本试试。
Elina_lxt
Elina_lxt
好的,谢谢。
0
cfrs2005
cfrs2005
楼主 好巧。。。
返回顶部
顶部