2

input [type = "password"]があるテキストボックスのプレースホルダーテキスト（パスワードを入力）を表示しようとしています。ここで、input [type="password"]を input[type= "text"]に変更してプレースホルダーを表示しようとしています。ユーザーがテキストボックスをクリックすると、 input [type="text"]が再びに変更されます。 input [type="password"]。ここでは機能していませんスクリプトを確認してください
私のjsfiddleはここにあります

 function setupPasswordPlaceholder(thisEl)
    {
        if('' !== thisEl.attr("alt"))
        {
            if('' === thisEl.val())
            {
                thisEl.val(thisEl.attr("alt"));
                thisEl.removeAttr("type");
                thisEl.attr('type','text');
                thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'});
            }
            thisEl.focus(function()
            {        
                if(thisEl.val() == thisEl.attr("alt")) 
                {
                    thisEl.val("");
                    thisEl.removeAttr("type");
                    thisEl.attr('type','password');
                    thisEl.css({'color': '#18A505','font-size': '10pt','font-weight':'normal'});
                }

        });

        thisEl.focusout(function()
        {        
            if('' === thisEl.val()) 
            {
                thisEl.val(thisEl.attr("alt"));
                thisEl.removeAttr("type");
                thisEl.attr('type','text');
                thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'});
            }
        });
    }
}



$("input[type='password']").each(function(){
        setupPasswordPlaceholder($(this));
});

</ p>

4

3 に答える 3

1

簡単なコード変更は、ほとんどのブラウザー（もちろん、IE6を除く）で機能する可能性があります。removeAttrを使用してから、プロパティ'type'のattrを設定し、代わりに次の1行を使用します。

交換：

  thisEl.removeAttr("type");
  thisEl.attr('type','text');

と：

  thisEl.get(0).type = type;

更新されたフィドルを参照してくださいhttp://jsfiddle.net/9HagB/7/

于 2012-12-21T05:53:46.160 に答える
1

これがフィドルです

HTML：

    <input style="display: none; " id="fakepasscode" type="password" autocomplete="off">
    <input style="display: inline;" id="passcode" hint="password" type="text" autocomplete="off">

JavaScript：

var clearField = function() {
    if ($("#passcode").val() != "password") {
        $("#passcode").val("");
    }
}

var resetField = function() {
    if ($("#passcode").val().length == 0) $("#passcode").val("password");
}


var pwdFocus = function() {
    $("#passcode").hide();
    $("#fakepasscode").val("");
    $("#fakepasscode").show();
    $("#fakepasscode").focus();
}

var pwdBlur = function() {
    if ($("#fakepasscode").val() == "") {
        $("#fakepasscode").hide();
        $("#passcode").show();
    }
}

var setupHintField = function() {
    $("#passcode").unbind("focus blur change");
    $("#passcode").focus(function() {
        clearField();
    });
    $("#passcode").blur(function() {
        resetField();
    });
    $("#passcode").change(function() {
        resetField();
    });
    $("#passcode").show();
    $("#fakepasscode").hide();
}


$(document).ready(function() {
    $("#passcode").val($("#passcode").attr("hint"));
    setupHintField();
    $("#passcode").unbind("focus");
    $("#passcode").focus(function() {
        pwdFocus();
    });
    $("#fakepasscode").blur(function() {
        pwdBlur();
    });
});​
于 2012-12-21T04:57:45.303 に答える
1

私が見たこれに対する一般的な解決策は、ラベルまたは別の入力ボックスを使用して、IEで「プレースホルダー」テキストを表示することです。

この優れた回答をご覧ください：https ：//stackoverflow.com/a/7225820/988355

于 2012-12-21T05:01:51.407 に答える