2

IE8 で動作し、入力タイプのパスワードで動作する優れたプレースホルダー プラグインを探しています。いくつか見つけましたが、どれも私の要件を満たしていません。また、必要なプレースホルダー テキストは淡色表示で斜体にする必要があります。

どんな情報も私にとって非常に役に立ちます。

4

3 に答える 3

4 
<!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>
于 2012-04-26T14:59:53.487 に答える
1

これを試してみてください。

脚本：

$(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" />
于 2013-01-29T21:41:37.240 に答える
1

コードの周りで苦労した後、私はこれになりました：

$('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();
            }
    });
于 2013-04-14T13:23:15.647 に答える