小粋空間  -  a cheap joke and a play on words site

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

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

１．はじめに

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

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

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

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

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

２．パスワードフィールドの文字を表示する（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属性を書き換えます。

３．パスワードフィールドの文字を表示する（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) {

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

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

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