TopJavaScriptjQuery > 2014年5月
2014年5月12日

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

May 12,2014 1:55 AM
Tag:[, ]
Permalink

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属性に対応した値を取得できます。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3