web-dev-qa-db-ja.com

JavaScriptのみを使用したボタンのクリックでのパスワードの表示/非表示

Javascriptのみを使用して目のアイコンをクリックしたときに、パスワード切り替え機能を作成したい。私はそれのためにコードを書きましたが、それはパスワードテキストを表示するためだけに機能し、逆には機能しません。誰かが以下のコードの論理エラーを見ることができます。

function show() {
  var p = document.getElementById('pwd');
  p.setAttribute('type', 'text');
}

function hide() {
  var p = document.getElementById('pwd');
  p.setAttribute('type', 'password');
}

function showHide() {
  var pwShown = 0;

  document.getElementById("eye").addEventListener("click", function() {
    if (pwShown == 0) {
      pwShown = 1;
      show();
    } else {
      pwShow = 0;
      hide();
    }
  }, false);
}
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" onclick="showHide()" id="eye">
  <img src="eye.png" alt="eye"/>
</button>
javascripthtmlformspasswords
14
user0428

ボタンをクリックするたびにクリックイベントをバインドしています。複数のイベントハンドラは必要ありません。さらに、var pwShown = 0クリックごとに入力状態を元に戻すことはできません（pwShownは変わりません）。

Onclick属性を削除し、クリックイベントを addEventListener でバインドします。

function show() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');
}

function hide() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');
}

var pwShown = 0;

document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
        pwShown = 1;
        show();
    } else {
        pwShown = 0;
        hide();
    }
}, false);
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>
23
dfsq

最も簡単な方法は、入力のタイプを切り替えるonclick属性を持つボタンを使用することです。

<input type="password" id="password" value="myPassword"/>
<button onclick="if (password.type == 'text') password.type = 'password';
  else password.type = 'text';">toggle</button>
19
Ameen Ra'is

テキストを表示するか非表示にするかを決定するために、1つの余分な「pwShown」変数を保持する必要はありません。あなたがする必要があるのは、以下のように「pwd」要素の「type」属性を調べることです：

実施例

JavaScript

document.getElementById("eye").addEventListener("click", function(e){
        var pwd = document.getElementById("pwd");
        if(pwd.getAttribute("type")=="password"){
            pwd.setAttribute("type","text");
        } else {
            pwd.setAttribute("type","password");
        }
    });

HTML

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" id="eye">
            <img src="eye.png" alt="eye"/>
         </button>
5
Prateek

次の手順に従ってください：以下の画像をダウンロードします。フォルダーを作成します。 htmlファイルと画像を同じフォルダーに追加します。それに応じて、javascriptおよびHTMLコードの「b.src」の値を置き換えます。

画像： ImagesImages

function show() {
  var a = document.getElementById("pwd");
  var b = document.getElementById("EYE");
  if (a.type == "password") {
    a.type = "text";
    b.src = "https://i.stack.imgur.com/waw4z.png";
  } else {
    a.type = "password";
    b.src = "https://i.stack.imgur.com/Oyk1g.png";
  }
}
<input type="password" id="pwd">
<button onclick="show()"><img src="https://i.stack.imgur.com/Oyk1g.png" id="EYE"></button>
4
user8158111

変数「pwShown」は、Javascriptコードのelseセクションでスペルミス（「pwShow」として）されています。したがって、pwShownが0にリセットされることはありません。

0
user5952347

私のコードからのJQueryソリューション：（IDを変更するだけです）。

$(document).ready(function () {
        $("#eye").click(function () {
            if ($("#password").attr("type") === "password") {
                $("#password").attr("type", "text");
            } else {
                $("#password").attr("type", "password");
            }
        });
  });
0
Orwol Chiles

これは、Tunakiの答えの改善です。フォームフィールドが既にどの状態にあるかを確認することすら気にしません。これは、マウスの状態によって完全に決定されるためです。これにより、パスワードは一時的にのみ表示されます（マウスボタンがボタン上で押されている場合のみ）。

<html>
<head>
    <title>Visible Password Test</title>
</head>

<body>
Password : <input type="password" name="password" id="password" />

<button type="button" id="eye" title="Did you enter your password correctly?" 
    onmousedown="password.type='text';" 
    onmouseup="password.type='password';" 
    onmouseout="password.type='password';">Peek at Password</button>

</body>
</html>
0
Mike Lewis

コードでは、showHide（）関数を呼び出すたびに、pwShown変数が0に設定されます。

PwShown変数をグローバル変数として宣言する必要があります。

var pwShown = 0;
function showHide()
{
 ...
}
0
Pillow the Awesome