jQueryやJavaScriptでパスワードフィールドの文字を表示する方法

jQueryやJavaScriptでパスワードフィールドの文字を表示する方法

Posted at May 12,2014 1:55 AM
Tag:[JavaScript, jQuery]

jQueryやJavaScriptでパスワードフィールドの文字を表示する方法を紹介します。

1.はじめに

パスワードフィールドに入力した文字を確認したいことがあると思いますが、デフォルトのパスワードフィールドでは「●」しか表示されません。

ということで、パスワードフィールドの文字を表示するサンプルを作ってみました。

通常のパスワードフィールド

チェックボックスをチェックすればパスワードフィールドを表示

ウェブサイトなどで入力したパスワードを確認したいときに便利です。

2.パスワードフィールドの文字を表示する(jQuery)

パスワードフィールドの文字を表示するには次のようにします(jQuery2.1.1で確認)。

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {
    $('#passcheck').change(function(){
        if ( $(this).prop('checked') ) {
            $('#password').attr('type','text');
        } else {
            $('#password').attr('type','password');
        }
    });
});
</script>
<input type="password" id="password" /> パスワードを表示 <input type="checkbox" id="passcheck" />

input要素の値はattrでなくprop()で取得します。

チェックボックスの値をprop()で取得するとtrueまたはfalseが返却されます。

ちなみに、チェックボックスの値をattr()で取得すると、1.7までは「checked」または「undefined」、1.8以降は「undefined」にしかならないようです。

そしてチェックボックスの状態によってtype属性を書き換えます。

3.パスワードフィールドの文字を表示する(JavaScript)

JavaScriptの場合は次のようにします。

<script>
function checkPassword(e) {
    pass = document.getElementById("password");
    if (e.checked) {
        pass.setAttribute("type", "text");
    } else {
        pass.setAttribute("type", "password");
    }
}
</script>
<input type="password" id="password" /><input type="checkbox" onclick="checkPassword(this)" />

チェックボックスのinput要素にonclick属性を追加します。

チェックボックスの状態はパラメータの「e.checked」で判定できます。

    if (e.checked) {

4.フォーム送信時の表示状態について

2項・3項いずれの場合も、パスワードフィールドのtype属性を「text」のままフォームを送信して問題ないようです。

GETデータやPOSTデータとして送信すれば、サーバ側でクエリーまたはname属性に対応した値を取得できます。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)