【JavaScript】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える

最終更新日:2021年11月04日公開日:2021年1月21日 2021年01月

パスワードを入力する機会が増えた昨今では必須の機能と言える、パスワード表示ボタンのクリックでテキストの表示・非表示をjavascriptを使って切り替える方法を紹介します。
今回のサンプルコードではパスワード入力欄を作成しています。

HTMLでテキストボックスとボタンを作成し、javascriptでクリック時の表示・非表示を切り替えます。
初期値はパスワードを隠した状態です。

次の表示(非表示)ボタンを押して動作を確かめてみてください。

1. サンプルコード
2. 解説
- 2.1. HTML
  - 2.1.1. テキストボックス作成
  - 2.1.2. パスワード表示ボタン作成
- 2.2. javascript

サンプルコード

以下のHTMLコードで実装できます。今回はHTMLとjavascriptは別ファイルに書くのではなく、scriptタグ内にjavascriptを書くことで同一ファイルにしています。
解説は後述します。

<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="password" id="textPassword" value="password123">
    <input type="button" id="buttonPassword" value="表示" onclick="pushHideButton();">
    <script language="javascript">
      function pushHideButton() {
        var txtPass = document.getElementById("textPassword");
        var btnPass = document.getElementById("buttonPassword");
        if (txtPass.type === "text") {
          txtPass.type = "password";
          btnPass.value = "表示";
        } else {
          txtPass.type = "text";
          btnPass.value = "非表示";
        }
      }
    </script>
  </body>
</html>

解説

ボタンクリック時に呼び出された関数により、入力欄(inputタグ)のtype属性を切り替えることでパスワードの表示・非表示を実現しています。

<input type="text">

↓

<input type="password">

type="password"の指定でパスワードを隠すことができます。

HTML

まず、HTMLでテキストボックス、ボタンを作成します。

テキストボックス作成

<input type="password" id="textPassword" value="password123">

パスワード表示ボタン作成

ボタンが押されたときに関数を呼び出す必要があるのでonclick="pushHideButton();"と定義します。

<input type="button" id="buttonPassword" value="表示" onclick="pushHideButton();">

javascript

次に、javascriptでtype属性を切り替える関数を作成します。
現在のinputタグのtype属性をもとにtext⇔passwordの切り替えを行います。
ボタンの表示も同時に切り替えています。

function pushHideFButton() {
  var txtPass = document.getElementById("textPassword");
  var btnPass = document.getElementById("buttonPassword");
  if (txtPass.type === "text") {
    txtPass.type = "password";
    btnPass.value = "表示";
  } else {
    txtPass.type = "text";
    btnPass.value = "非表示";
  }
}

以上、javascriptとHTMLを用いたパスワード表示切替をご紹介しました。