この記事の要点

HTML の を JavaScript で type="text" に切替るのが基本 目玉アイコン (Font Awesome / Bootstrap Icons) でユーザーに切替操作を提供 Bootstrap 5 の input-group + ボタンで簡単に実装できる Laravel Blade ではコンポーネント化して再利用 セキュリティ注意: 公共の場での誤クリックに注意、Web セッションの自動ログアウト併用、パスワードマネージャの利用を推奨

基本実装（素の HTML + JavaScript）

  パスワード
  
  表示

  

目玉アイコン UI（Font Awesome）

Bootstrap 5 の input-group で実装

  パスワード
  

    
    
      
    
  

Laravel Blade コンポーネント化

{{-- resources/views/components/password-input.blade.php --}}
@props(['name' => 'password', 'label' => 'パスワード', 'placeholder' => null])


  {{ $label }}
  

    
    
      
    
    @error($name)
      
{{ $message }}
    @enderror
  

// resources/js/password-toggle.js（layouts で読み込む）
document.addEventListener('click', (e) => {
  const btn = e.target.closest('.toggle-pw');
  if (!btn) return;
  const targetId = btn.dataset.target;
  const input = document.getElementById(targetId);
  const icon = btn.querySelector('i');
  if (input.type === 'password') {
    input.type = 'text';
    icon.classList.replace('bi-eye', 'bi-eye-slash');
  } else {
    input.type = 'password';
    icon.classList.replace('bi-eye-slash', 'bi-eye');
  }
});

使い方:

{{-- ログイン画面で --}}

  @csrf
  
  
  ログイン

React での実装例

import { useState } from 'react';

export function PasswordInput({ name = 'password', label = 'パスワード' }) {
  const [visible, setVisible] = useState(false);
  return (
    

      
       setVisible(!visible)}
        aria-label={visible ? 'パスワードを隠す' : 'パスワードを表示'}
      >
        
      
    
  );
}

長押しで一時表示（押している間だけ）

押すと表示

セキュリティ上の注意点

注意点	説明
ショルダーハッキング	公共の場・オンライン会議の画面共有時に注意。一時表示中は背後を確認
長時間表示しない	一定秒数（例: 5 秒）で自動的に隠す実装を推奨
ログイン画面以外では使わない	登録フォームの確認用は許容、ログイン画面では推奨しない場面も
autocomplete 属性	autocomplete="current-password" でパスワードマネージャ連携
クリップボードコピー検知	サーバー側でログイン後にコピー通知を出すなどは過剰サービスになりがち

自動で隠す実装

const pw = document.getElementById('pw');
const btn = document.getElementById('toggle');
let timer;

btn.addEventListener('click', () => {
  if (pw.type === 'password') {
    pw.type = 'text';
    clearTimeout(timer);
    // 5 秒後に自動で隠す
    timer = setTimeout(() => {
      pw.type = 'password';
    }, 5000);
  } else {
    pw.type = 'password';
    clearTimeout(timer);
  }
});

アクセシビリティ対応

• ボタンには必ず aria-label を付与（「パスワードを表示」「パスワードを隠す」）
• キーボード操作対応（tabindex でフォーカス順、Space / Enter で切替）
• スクリーンリーダーで切替が伝わるよう aria-pressed 属性を更新
• 色のみで状態を伝えない（アイコン形状で識別可能に）

FAQ

Q: パスワードマネージャと干渉しないか？
A: type を切り替えても自動入力は機能します。autocomplete="current-password" / "new-password" を正しく指定してください。

Q: スマホ画面で一時表示しても短時間で隠したい
A: 上記「自動で隠す実装」を採用。スマホは画面が小さく覗き見されにくい代わり、画面録画リスクがあるので 3〜5 秒程度に抑制。

Q: 既存のパスワード入力欄に一括適用したい
A: document.querySelectorAll("input[type=password]") でループしてラッパー要素と切替ボタンを動的挿入する関数を用意し、全ページで読み込む JS にすると一元管理できます。