テキストボックス（入力制御パターン集）

/* === テキストボックス パターン集 ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-accent:  #2B7FE8; /* フォーカス時のボーダー・影色 */
  --color-warn:    #E65100; /* 残り5文字以下のカウンター色 */
  --color-danger:  #E53935; /* 文字数上限到達のカウンター色 */
  --color-text:    #1A2332; /* 入力テキスト色 */
  --color-label:   #5A6A7A; /* ラベル文字色 */
  --color-border:  #D0D7E0; /* 通常時のボーダー色 */
  --color-bg:      #F4F6F9; /* カード背景色 */
  --color-hint:    #9AA5B4; /* ヒントテキスト色 */
}

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

/* 入力欄の上に表示するラベル */
.tb-field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-label);
}

/* input / textarea 共通スタイル */
.tb-input,
.tb-textarea {
  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;
}

/* フォーカス時: ボーダーと薄い影でアクティブ感を出す */
.tb-input:focus,
.tb-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

/* テキストエリア: overflow: hidden にしないと自動拡張時にスクロールバーが出る */
.tb-textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.6;
}

/* 残り文字数カウンター */
.char-counter {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--color-hint);
  text-align: right;
}
.char-counter.warn   { color: var(--color-warn);   font-weight: 600; }
.char-counter.danger { color: var(--color-danger);  font-weight: 700; }

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

/* スマホ対応: 600px以下でカードを全幅に */
@media (max-width: 600px) {
  .tb-pattern { max-width: 100%; }
}

// === Pattern 1: Enterキー無効化 ===
var basicInput = document.getElementById('basic-input');
basicInput.addEventListener('keydown', function (e) {
  if (e.key === 'Enter') {
    // フォーム送信・改行を止める
    e.preventDefault();
  }
});


// === Pattern 2: 文字数カウンター ===
// 最大文字数を定数で定義（変更するときはここだけ直す）
var MAX_CHARS    = 20;
var countInput   = document.getElementById('count-input');
var countDisplay = document.getElementById('count-display');

countInput.addEventListener('input', function () {
  // Math.max で 0 未満にならないよう保護
  var remaining = Math.max(0, MAX_CHARS - countInput.value.length);

  countDisplay.textContent = '残り' + remaining + '文字';

  // いったんクラスをリセットしてから、状態に応じてクラスを付け直す
  countDisplay.className = 'char-counter';
  if (remaining <= 5 && remaining > 0) {
    countDisplay.classList.add('warn');   // 残り5文字以下: オレンジ
  }
  if (remaining === 0) {
    countDisplay.classList.add('danger'); // 上限到達: 赤
  }
});


// === Pattern 3: テキストエリア 高さ自動調整 ===
var autoTextarea = document.getElementById('auto-textarea');

autoTextarea.addEventListener('input', function () {
  // いったん auto に戻してから scrollHeight で高さを再計算する
  // auto に戻さないと文字を削除したときに高さが縮まない
  autoTextarea.style.height = 'auto';
  autoTextarea.style.height = autoTextarea.scrollHeight + 'px';
});