Question

我正在寻找一个好的占位符插件，它可以在IE8中使用输入类型密码。我找到了一些，但没有一个满足我的要求。我需要的占位符文本也应该是灰色和斜体。

任何信息都对我很有帮助。

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if ($.browser.msie) {         //this is for only ie condition ( microsoft internet explore )
                $('input[type="text"][placeholder], textarea[placeholder]').each(function () {
                    var obj = $(this);

                    if (obj.attr('placeholder') != '') {
                        obj.addClass('IePlaceHolder');

                        if ($.trim(obj.val()) == '' && obj.attr('type') != 'password') {
                            obj.val(obj.attr('placeholder'));
                        }
                    }
                });

                $('.IePlaceHolder').focus(function () {
                    var obj = $(this);
                    if (obj.val() == obj.attr('placeholder')) {
                        obj.val('');
                    }
                });

                $('.IePlaceHolder').blur(function () {
                    var obj = $(this);
                    if ($.trim(obj.val()) == '') {
                        obj.val(obj.attr('placeholder'));
                    }
                });
            }
        });
    </script>
</head>
<body>
<textarea placeholder="Detail-1" rows="3" cols="3" value=""></textarea><br />
<input type="text" placeholder="UserName" /><br />
<input type="password" placeholder="Password" /><br />
<textarea placeholder="Details-2" rows="3" cols="3"></textarea>
</body>
</html>

Answer 2

试试这个。

脚本：

$(document).ready(function () {
        if ($.browser.msie) {         //this is for only ie condition ( microsoft internet explore )
            $('input[type="text"][placeholder], textarea[placeholder]').each(function () {
                var obj = $(this);

                if (obj.attr('placeholder') != '') {
                    obj.addClass('IePlaceHolder');

                    if ($.trim(obj.val()) == '' && obj.attr('type') != 'password') {
                        obj.val(obj.attr('placeholder'));
                    }
                }
            });

            $('.IePlaceHolder').focus(function () {
                var obj = $(this);
                if (obj.val() == obj.attr('placeholder')) {
                    obj.val('');
                }
            });

            $('.IePlaceHolder').blur(function () {
                var obj = $(this);
                if ($.trim(obj.val()) == '') {
                    obj.val(obj.attr('placeholder'));
                                    }
            });
        }
        // On DOM ready, hide the real password
        $('.real').hide();

        // Show the fake pass (because JS is enabled)
        $('.fake').show();

        // On focus of the fake password field
        $('.fake').focus(function(){
        $(this).hide(); // hide the fake password input text
        $('.real').show().focus(); // and show the real password input password
        });

        // On blur of the real pass
        $('.real').blur(function(){
        if($(this).val() == ""){ // if the value is empty, 
        $(this).hide(); // hide the real password field
        $('.fake').show(); // show the fake password
        }
        // otherwise, a password has been entered,
        // so do nothing (leave the real password showing)
        });

    });

也把他放在以下形式：

<input type="password" name="password" class="field real" id="password"  />
<input type="text" class="field fake" tabindex="1" value="" placeholder="Password" />

Answer 3

在你的代码挣扎之后，我最终得到了这个：

$('input[type="text"][placeholder], textarea[placeholder]').each(function(){
        var o=$(this);
        if(o.attr('placeholder') != '') {
        o.addClass('IePlaceHolder');
           if($.trim(o.val())=='') {
              o.val(o.attr('placeholder')).css('color','#888888');
              o.addClass('IeIsEmpty');
              o.removeClass('focusedon');
           }
        }
    });

    $('.IePlaceHolder').focus(function(){
        var o = $(this);
        if(o.val() == o.attr('placeholder')) {
            o.css('color', '#666666');
            o.addClass('focusedon');
        } /* endIF */
    });

    $('.IePlaceHolder').blur(function (){
        var o = $(this);
        if($.trim(o.val())=='' || $.trim(o.val())==o.attr('placeholder')) {
            o.val(o.attr('placeholder'));
            o.css('color', '#888888');
            if(!o.hasClass('IeIsEmpty')) o.addClass('IeIsEmpty');
            o.removeClass('focusedon');
        }
    });

    $('.IePlaceHolder').on("keyup change paste", function(){
        var o=$(this);
        if($.trim(o.val())!='' && $.trim(o.val())!=o.attr('placeholder')) {
            o.css('color', '#111111');
            o.removeClass('IeIsEmpty');
        }
    })
    .on('keydown', function(){
        var o=$(this);
        if($.trim(o.val())!='' && $.trim(o.val())==o.attr('placeholder')) {
            o.val('');
        }
    })
    .on("click", function(){
        var o=$(this);
        if(o.val() != o.attr('placeholder')) return;
        if(this.setSelectionRange)
            {
                this.focus();
                this.setSelectionRange(0,0);
            }
            else if(this.createTextRange) {
            var r = this.createTextRange();
                r.collapse(true);
                r.moveEnd('character', 0);
                r.moveStart('character', 0);
                r.select();
            }
    });

占位符插件应该可以在IE8中使用

3 个答案: