タイトル: パスワードを一時的に表示させる方法
SEOタイトル: 「目玉アイコン」でパスワード入力欄を一時的に表示する実装（HTML / JS / Bootstrap / Blade）
| この記事の要点 |
|
基本実装（素の HTML + JavaScript）
パスワード一時表示
目玉アイコン UI（Font Awesome）
Bootstrap 5 の input-group で実装
Laravel Blade コンポーネント化
{{-- resources/views/components/password-input.blade.php --}}
@props(['name' => 'password', 'label' => 'パスワード', 'placeholder' => null])
@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');
}
});使い方:
{{-- ログイン画面で --}}
React での実装例
import { useState } from 'react';
export function PasswordInput({ name = 'password', label = 'パスワード' }) {
const [visible, setVisible] = useState(false);
return (
);
}長押しで一時表示（押している間だけ）
セキュリティ上の注意点
| 注意点 | 説明 |
|---|---|
| ショルダーハッキング | 公共の場・オンライン会議の画面共有時に注意。一時表示中は背後を確認 |
| 長時間表示しない | 一定秒数（例: 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 にすると一元管理できます。