4

HTML5プレースホルダー属性の代わりにjQueryを使用しています

<input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Email'; }" onclick="if (this.value == 'Email') { this.value = ''; }"  />

これは正常に機能していますtype="text"が、type="password"表示のみです*

パスワードフィールドにプレースホルダーを使用するにはどうすればよいですか? IE8で必要

回答ありがとうございます...

4

5 に答える 5

15

通常の入力を作成し、focusそれをパスワード フィールドに切り替えます。値が空の場合はblur通常の入力に戻し、そうでない場合はパスワード フィールドのままにします。

これが実際の JSFiddle です: http://jsfiddle.net/q8ajJ/

HTML

<!-- Style = display none for people who dont have javascript -->
<input type="text" name="fake_pass" id="fake_pass" value="Enter Password:" style="display:none"/>
<input type="password" name="real_pass" id="real_pass"/>​

Javascript (jQuery)

// On DOM ready, hide the real password
$('#real_pass').hide();

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

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

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

</p>

于 2012-11-16T11:06:59.690 に答える
6

もう1つの汚いハックがあります-フォーカスとブラーでJSを使用して作成しlabel、position: absolute表示/非表示にすることができます。

私の知る限り、どのブラウザでも動作します。さらに、フォームの送信を検証する方が簡単です。

HTML

<div class="wrapper">
    <input class="withPlaceholder" type="password" id="pass" />
    <label class="placeholder" for="pass">Password</label>
</div>
<br />
<div class="wrapper">
    <input class="withPlaceholder" type="password" id="pass2" />
    <label class="placeholder" for="pass2">Password2</label>
</div>

CSS

div.wrapper {position: relative}
label.placeholder {position: absolute; color: #CCC; left: 2px; top: 0}

JS

$("input.withPlaceholder").on({
    focus: function() {
        $("label[for=" + $(this).prop("id") + "]").hide();
    },
    blur: function() {
        if ($(this).val().length == 0) {
            $("label[for=" + $(this).prop("id") + "]").show();
        }
    }
});
于 2012-11-16T12:34:13.567 に答える
4

JustAnil の回答に基づいて、すべてのパスワード フィールドに対応する各フィールドを手動で追加する必要を回避する方法を探して、JustAnil のソリューションを次のように適応させました。

function ManagePasswords(root) {
    root.find('input[type=password][placeholder]').each(function (index, current) {
        var $current = $(current),
            $fake = $current.clone().attr('type', 'text');

        $fake.val($fake.attr('placeholder'));

        $fake.insertBefore($current);
        $current.hide();

        $fake.focusin(function () {
            $(this).hide();
            $(this).next().show().focus();
        });

        $current.blur(function () {
            if ($(this).val() == '') {
                $(this).hide();
                $(this).prev().show();
            }
        });
    });
}

あとは電話するだけです

ManagePasswords($('#rootElement'));

お役に立てれば！

于 2013-06-12T11:54:49.003 に答える
1

inputプレースホルダーに別の要素を追加すると、form検証および送信中に問題が発生する可能性があります。これを別の方法で解決しました。

HTML

<form id="test">
    <input type="text" id="name" name="name" placeholder="Name"  />
    <input type="password" id="password" name="password" placeholder="Password" />
</form>

jQuery関数

function placeholder(form) {
    form.wrapInner('<ul style="list-style: none; list-style-type:none; padding:0; margin: 0;">');
    form.find('input[placeholder]').each(function (index, current) {
        $(current).css('padding', 0).wrap('<li style="position: relative; list-style: none; list-style-type:none; padding:0; margin: 0;">');            
        var height = $(current).parent('li').height();
        var $current = $(current),
            $placeholder = $('<div class="placeholder">'+$current.attr('placeholder')+'</div>');
        $placeholder.css({'color': '#AAA', 'position':'absolute', 'top': 0, 'left': 0, 'line-height': height+'px', 'margin': '0 0 0 5px', 'border': '0 none', 'outline': '0 none', 'padding': 0});
        $placeholder.insertAfter($current);
        $current.removeAttr('placeholder');
        $placeholder.click(function(){
            $current.focus()
        });
        $current.keypress(function(){
            if($(this).val().length >= 0) {
                $placeholder.hide();
            } 
        });
        $current.blur(function(){
            if($(this).val().length == 0) {
                $placeholder.show();
            } else {
                $placeholder.hide();
            }
        });                 
    });         
}

フォームの関数を呼び出すだけです。

placeholder($("#test"));

type="password"これは、IE8、IE9、IE10、Google Chrome、FireFox、Safari、および Opera でテスト済みのものを含む、プレースホルダーを含むすべてのタイプの入力フィールドで機能します。

于 2013-07-11T17:04:40.830 に答える
1

このコードを使用すると、jQuery が残りを行います...

htmlタグの置き換え

<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><html><![endif]-->

jQueryの良さ...

$(document).ready(function(){

$('.ie8 [placeholder][type="password"]').each(function(){
        $(this).wrap('<div style="position: relative;"></div>');
        $('<span style=" position: absolute;top: 5px;left:14px;" class="ie8Lbls">'+$(this).attr('placeholder')+'</span>').insertAfter($(this));
        $(this).attr('placeholder','');
        if($(this).val() == "") {$(this).parent().find('.ie8Lbls').show();}
    }).on('focus',function(){
        $(this).parent().find('.ie8Lbls').hide();
    }).on('blur',function(){
        if($(this).val() == "") {$(this).parent().find('.ie8Lbls').show();}
    });
    $(document).on('click','.ie8Lbls',function(){
        $(this).parent().find('input').focus();
    });

});

新しいプレースホルダーの外観を変更するスタイル

<style>
.ie8Lbls {
    font-size:10px;
}
</style>
于 2014-06-19T00:14:03.637 に答える