テキストボックス 3 — 入力補助・特殊入力

/* === 入力補助・特殊入力 サンプル ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-accent:  #2B7FE8; /* フォーカス時のボーダー・アクセント色 */
  --color-text:    #1A2332; /* 入力テキスト色 */
  --color-label:   #5A6A7A; /* ラベル文字色 */
  --color-border:  #D0D7E0; /* 通常時のボーダー色 */
  --color-bg:      #F4F6F9; /* カード背景色 */
  --color-icon:    #9AA5B4; /* アイコン色 */
  --color-otp-filled: #EEF4FD; /* OTP 入力済みボックスの背景色 */
}

/* 各パターンを囲むカード */
.tb3-pattern {
  margin-bottom: 16px;
  padding: 20px;
  background: var(--color-bg);
  border-radius: 8px;
  max-width: 520px;
}
.tb3-pattern:last-child { margin-bottom: 0; }

/* フィールドラベル */
.tb3-field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-label);
}

/* input 共通スタイル */
.tb3-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-text);
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  font-family: sans-serif;
}
.tb3-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}


/* ============================================================
   Pattern 1: パスワード 表示/非表示トグル
   ============================================================ */

/* トグルボタンを右端に重ねるために relative を設定 */
.tb3-password-wrap { position: relative; }

/* ボタン幅分のパディングを右側に確保する */
.tb3-password-wrap .tb3-input { padding-right: 44px; }

/* 目のアイコンボタン: 入力欄の右端に絶対配置 */
.tb3-toggle-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.tb3-toggle-btn:hover { color: var(--color-label); }


/* ============================================================
   Pattern 2: 検索ボックス × クリアボタン
   ============================================================ */

/* 虫眼鏡・×ボタンを input に重ねるために relative を設定 */
.tb3-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* 虫眼鏡アイコン: 左端に絶対配置。pointer-events:none でクリックを透過させる */
.tb3-search-icon {
  position: absolute;
  left: 12px;
  color: var(--color-icon);
  pointer-events: none;
}

/* 左右アイコン分のパディングを確保 */
.tb3-input--search {
  padding-left: 36px;
  padding-right: 36px;
}

/* ブラウザ標準の×ボタンを非表示にする（Chrome/Safari が追加する） */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ×ボタン: 右端に絶対配置。opacity で表示/非表示をアニメーション */
.tb3-clear-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none; /* 非表示中はクリック不可にする */
  transition: opacity 0.15s, color 0.15s;
}
/* .visible を付けると表示・クリック可能になる */
.tb3-clear-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
.tb3-clear-btn:hover { color: var(--color-label); }


/* ============================================================
   Pattern 3: OTP 6桁 分割入力
   ============================================================ */

/* ボックスを横一列に並べる */
.tb3-otp-wrap {
  display: flex;
  gap: 8px;
}

/* 1文字用の正方形ボックス */
.tb3-otp-input {
  width: 44px;
  height: 52px;
  padding: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: sans-serif;
  box-sizing: border-box;
  caret-color: transparent; /* テキストカーソルを非表示にしてボックス感を出す */
}
.tb3-otp-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}
/* 入力済みのボックスに薄い背景色を付ける */
.tb3-otp-input.filled { background: var(--color-otp-filled); }

/* ヒントテキスト */
.tb3-hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-icon);
}

/* スマホ対応 */
@media (max-width: 600px) {
  .tb3-pattern { max-width: 100%; }
  .tb3-otp-input { width: 38px; height: 46px; font-size: 18px; }
  .tb3-otp-wrap { gap: 6px; }
}

// ================================================================
// Pattern 1: パスワード 表示/非表示 トグル
// ================================================================
var passwordInput  = document.getElementById('password-input');
var passwordToggle = document.getElementById('password-toggle');
// SVGアイコンを2枚用意し、状態に応じて切り替える
var iconEye    = passwordToggle.querySelector('.icon-eye');
var iconEyeOff = passwordToggle.querySelector('.icon-eye-off');

passwordToggle.addEventListener('click', function () {
  var isHidden = passwordInput.type === 'password';

  // type 切り替え: password（マスク）↔ text（平文表示）
  passwordInput.type = isHidden ? 'text' : 'password';

  // アイコン切り替え
  iconEye.style.display    = isHidden ? 'none' : '';
  iconEyeOff.style.display = isHidden ? ''     : 'none';

  // スクリーンリーダー向け: ボタンの役割をラベルで伝える
  passwordToggle.setAttribute(
    'aria-label',
    isHidden ? 'パスワードを非表示' : 'パスワードを表示'
  );
});


// ================================================================
// Pattern 2: 検索ボックス × クリアボタン
// ================================================================
var searchInput = document.getElementById('search-input');
var searchClear = document.getElementById('search-clear');

// 入力のたびに×ボタンの表示状態を更新する
searchInput.addEventListener('input', function () {
  updateClearBtn();
});

// ×ボタンの表示/非表示を切り替える関数
// display ではなく opacity + pointer-events で制御することで
// CSS の transition によるフェードアニメーションが効く
function updateClearBtn() {
  if (searchInput.value.length > 0) {
    searchClear.classList.add('visible');
  } else {
    searchClear.classList.remove('visible');
  }
}

// ×ボタンクリック: 値をクリアしてフォーカスを戻す
searchClear.addEventListener('click', function () {
  searchInput.value = '';
  updateClearBtn();
  searchInput.focus();
});


// ================================================================
// Pattern 3: OTP 6桁 分割入力
// ================================================================
var otpInputs = Array.from(document.querySelectorAll('.tb3-otp-input'));

otpInputs.forEach(function (input, index) {

  // --- キーダウン: 入力フィルタリングと Backspace 処理 ---
  input.addEventListener('keydown', function (e) {

    // Backspace の特別処理
    if (e.key === 'Backspace') {
      if (input.value === '' && index > 0) {
        // 空のボックスで Backspace → 前のボックスへ戻って削除
        e.preventDefault();
        otpInputs[index - 1].value = '';
        otpInputs[index - 1].classList.remove('filled');
        otpInputs[index - 1].focus();
      }
      // 現在のボックスに値があれば通常の削除（ブラウザのデフォルト動作）
      return;
    }

    // Tab・矢印キーはそのまま通過させる
    var passThrough = ['Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
    if (passThrough.indexOf(e.key) !== -1) return;

    // Ctrl+V（ペースト）・Ctrl+A などはそのまま通過させる
    if (e.ctrlKey || e.metaKey) return;

    // 数字以外のキーを無効化
    if (!/^\d$/.test(e.key)) {
      e.preventDefault();
      return;
    }

    // 数字キーが押されたとき、すでに値があれば上書きできるよう一旦クリア
    // （クリアしないとブラウザによっては maxlength=1 のため入力を弾く）
    if (input.value.length >= 1) {
      input.value = '';
      input.classList.remove('filled');
    }
  });

  // --- インプット: 1文字入力されたら次のボックスへ自動フォーカス ---
  input.addEventListener('input', function () {
    if (input.value.length === 1) {
      input.classList.add('filled');
      // 最後のボックスでなければ次へ移動
      if (index < otpInputs.length - 1) {
        otpInputs[index + 1].focus();
      }
    } else {
      input.classList.remove('filled');
    }
  });

  // --- ペースト: 複数桁をまとめて各ボックスに分配 ---
  input.addEventListener('paste', function (e) {
    e.preventDefault();

    // クリップボードのテキストから数字のみ抽出
    var digits = e.clipboardData.getData('text').replace(/\D/g, '');

    // ペーストした位置のボックスから順に 1 文字ずつセット
    for (var i = 0; i < digits.length; i++) {
      var target = otpInputs[index + i];
      if (!target) break; // ボックス数を超えたら終了
      target.value = digits[i];
      target.classList.add('filled');
    }

    // 最後に埋めたボックスの次へフォーカス（末尾なら末尾ボックスにとどまる）
    var nextIndex = Math.min(index + digits.length, otpInputs.length - 1);
    otpInputs[nextIndex].focus();
  });
});