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

最終更新日: 公開日: 2021年01月

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

HTMLでテキストボックスとボタンを作成し、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を用いたパスワード表示切替をご紹介しました。

 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
Chrome 拡張機能 PageSpeed Insights SEO WordPress Youtube お問い合わせフォーム アナリティクス アンケートフォーム サーチコンソール セミナー タグマネージャー データベース ヒアリング プラグイン ページ閲覧解析 マーケティング メール配信 リッチリザルト レスポンシブ対応 ログ解析 勉強会 商品企画 営業 営業力 営業支援システム 実装 検索順位 検索順位チェックツール 追跡 開発者ツール
contact
Pagetop