パスワードの表示・非表示を切り替える

はじめに

パスワードの表示・非表示を切り替えるには、パスワード入力欄のinput type属性を動的に変更することで実現します
今回は既存のサイトにあるパスワード入力欄をhtml構造を変更せずにjavascriptだけでパスワードの表示・非表示を切り替えるためのjavascriptを説明します

完成イメージ

以下のサンプルサイトで実際に動作を確認できます

全体のコード

コード全体は以下を参照してください

コードの説明

パスワードの表示・非表示切り替えの仕組み

パスワード入力欄のinput type属性を動的に変更することでパスワードの表示・非表示切り替え。具体的には、「password」と「text」の間で切り替えを行うことで、パスワードの表示・非表示を制御しています。

function togglePasswordVisibility(input, passwordVisibleIcon, passwordHiddenIcon) {
  if (input.type === 'password') {
    input.type = 'text';
    // アイコンの表示を切り替え
  } else {
    input.type = 'password';
    // アイコンの表示を切り替え
  }
}

やっていることの概要

• パスワード入力フィールドの自動検出
• 表示・非表示を切り替えるボタンの動的追加
• パスワードの表示状態の切り替え
• スタイルの動的適用

コードの構造

定数の定義

const PASSWORD_TOGGLE_CLASSES = { ... };
const SVG_PATHS = { ... };

これらの定数は、CSSクラス名やSVGパスを定義しており、コード全体で一貫して使用されます。
ここで定義したクラス名が既存のコードと競合する場合は変更してください。

ラッパー要素の作成

function createWrapper(input, originalDisplay) {
  const wrapper = document.createElement('div');
  wrapper.className = PASSWORD_TOGGLE_CLASSES.wrapper;
  wrapper.style.display = originalDisplay;
  wrapper.style.width = window.getComputedStyle(input).width;
  wrapper.style.height = window.getComputedStyle(input).height;
  return wrapper;
}

この関数は、パスワード入力フィールドを包む新しいdiv要素を作成します。これにより、切り替えボタンを適切に配置できます。
また、元々のフィールドのサイズを維持するためにdiv要素のサイズを指定しています。

切り替えボタンの作成

function createToggleButton() { ... }

パスワードの表示・非表示を切り替えるボタンを作成します。SVGアイコンを使用して、現在の状態を視覚的に表現します。

パスワードの表示・非表示の切り替え

function togglePasswordVisibility(input, passwordVisibleIcon, passwordHiddenIcon) { ... }

この関数が、パスワードフィールドのtype属性を「password」と「text」の間で切り替え、アイコンの表示も適切に変更します。

パスワードの表示・非表示の切替ボタンの追加

function setupPasswordToggle(input) {
  const originalDisplay = window.getComputedStyle(input).display;
  const wrapper = createWrapper(input, originalDisplay);
  input.parentNode.insertBefore(wrapper, input);
  input.style.paddingRight = '40px';
  input.style.width = wrapper.style.width;
  wrapper.appendChild(input);
  ...
}

各パスワード入力フィールドに対して、ラッパー要素とトグルボタンを追加し、イベントリスナーを設定します。
トグルボタンと入力した値が被らないようにパスワード入力フィールドに対してpaddingを指定していますが、この指定を行うことで元の要素と幅が変わってしまうためstyleで定義せずにここで指定し、wrapperに指定した元の幅を指定しています。

スタイルの追加

function addStyles() { ... }

必要なCSSスタイルを動的に追加し、レイアウトとデザインを整えます。

初期化

document.addEventListener('DOMContentLoaded', () => { ... });

DOMの読み込みが完了したら、すべてのパスワード入力フィールドを検出し、パスワードの表示・非表示の切替ボタンを追加します。

まとめ

今回は、htmlやスタイルシートを変更することなく、javascriptファイルを追加するだけで、サイト全体のパスワード入力項目に表示・非表示を切り替えるボタンを追加する方法を紹介しました。
ある程度、既存のスタイルを変えないようにしていますが、実際に利用する際はしっかりと動作確認をするようにしてください。