フォーム改善のJSスニペット 12選

<!-- data-max が上限文字数 -->
<div class="bnto-count" data-bnto-count data-max="30">
  <textarea rows="3" placeholder="30文字まで入力できます" aria-label="コメント"></textarea>
  <span class="num" aria-live="polite">あと30文字</span>
</div>

.bnto-count {
  --c1: hsl(168 34% 45%);  /* フォーカス色 */
  max-width: 290px;
}
.bnto-count textarea {
  display: block; width: 100%; min-height: 72px;
  padding: 10px 12px;
  border: 2px solid #DFE9F1; border-radius: 12px;
  background: #fff; font: inherit; line-height: 1.7;
  resize: vertical; transition: border-color .2s;
}
.bnto-count textarea:focus { outline: none; border-color: var(--c1); }
.bnto-count .num {
  display: block; margin-top: 6px; text-align: right;
  font-size: 12px; font-weight: 800; color: #8a8478;
}
/* 超過したら赤に */
.bnto-count.is-over textarea { border-color: #E0453A; }
.bnto-count.is-over .num { color: #E0453A; }

// data-bnto-count を自動検出して初期化（複数設置OK・二重実行OK）
(function () {
  document.querySelectorAll('[data-bnto-count]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var field = box.querySelector('textarea, input');
    var num = box.querySelector('.num');
    var max = parseInt(box.dataset.max, 10) || 100;
    function update() {
      var rest = max - field.value.length;
      num.textContent = rest >= 0 ? 'あと' + rest + '文字' : Math.abs(rest) + '文字オーバー';
      box.classList.toggle('is-over', rest < 0);
    }
    field.addEventListener('input', update);
    update();
  });
})();

<div class="bnto-pw" data-bnto-pw>
  <input type="password" aria-label="パスワード">
  <button type="button" class="eye" aria-label="パスワードを表示" aria-pressed="false">
    <!-- 目アイコン（表示用） -->
    <svg class="i-on" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
    <!-- 斜線付きの目アイコン（非表示用） -->
    <svg class="i-off" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
  </button>
</div>

.bnto-pw {
  --c1: hsl(210 72% 50%);  /* フォーカス・アイコン色 */
  position: relative; max-width: 290px;
}
.bnto-pw input {
  display: block; width: 100%;
  padding: 11px 46px 11px 13px;  /* 右にボタンの余白 */
  border: 2px solid #DFE9F1; border-radius: 12px;
  background: #fff; font: inherit;
  transition: border-color .2s;
}
.bnto-pw input:focus { outline: none; border-color: var(--c1); }
.bnto-pw .eye {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: none;
  color: #8a8478; cursor: pointer;
}
.bnto-pw .eye:hover, .bnto-pw.is-show .eye { color: var(--c1); }
/* 状態に応じてアイコンを出し分け */
.bnto-pw .i-off { display: none; }
.bnto-pw.is-show .i-on { display: none; }
.bnto-pw.is-show .i-off { display: block; }

// 目アイコンで type="password" ⇔ "text" を切り替え
(function () {
  document.querySelectorAll('[data-bnto-pw]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var input = box.querySelector('input');
    var btn = box.querySelector('.eye');
    btn.addEventListener('click', function () {
      var show = input.type === 'password';
      input.type = show ? 'text' : 'password';
      box.classList.toggle('is-show', show);
      btn.setAttribute('aria-pressed', show);
      btn.setAttribute('aria-label', show ? 'パスワードを隠す' : 'パスワードを表示');
    });
  });
})();

<!-- 必須にしたい項目に data-req を付ける -->
<form class="bnto-req" data-bnto-req novalidate>
  <input type="text" data-req placeholder="お名前（必須）" aria-label="お名前">
  <input type="email" data-req placeholder="メールアドレス（必須）" aria-label="メールアドレス">
  <p class="err" aria-live="polite"></p>
  <button type="submit" class="bt">送信する</button>
</form>

.bnto-req {
  --c1: hsl(345 72% 52%);  /* フォーカス・ボタン色 */
  display: flex; flex-direction: column; gap: 9px;
  max-width: 290px;
}
.bnto-req input {
  display: block; width: 100%; padding: 10px 12px;
  border: 2px solid #DFE9F1; border-radius: 11px;
  background: #fff; font: inherit;
  transition: border-color .2s, background .2s;
}
.bnto-req input:focus { outline: none; border-color: var(--c1); }
/* 空欄だった項目を赤く */
.bnto-req input.is-error { border-color: #E0453A; background: #FFF6F5; }
.bnto-req .err {
  margin: 0; min-height: 1em;
  font-size: 11.5px; font-weight: 800; color: #E0453A;
}
.bnto-req.is-ok .err { color: hsl(150 55% 38%); }
.bnto-req .bt {
  padding: 11px; border: none; border-radius: 11px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}

// 送信時に data-req の空欄をチェックしてエラー表示
(function () {
  document.querySelectorAll('[data-bnto-req]').forEach(function (form) {
    if (form.dataset.bntoInit) return;
    form.dataset.bntoInit = '1';
    var err = form.querySelector('.err');
    form.addEventListener('submit', function (e) {
      var empty = [];
      form.querySelectorAll('[data-req]').forEach(function (field) {
        var bad = field.value.trim() === '';
        field.classList.toggle('is-error', bad);
        if (bad) empty.push(field.getAttribute('aria-label') || '必須項目');
      });
      if (empty.length) {
        e.preventDefault();
        form.classList.remove('is-ok');
        err.textContent = empty.join('・') + 'を入力してください';
      } else {
        e.preventDefault(); // デモ用。実運用ではこの行を削除すると送信されます
        form.classList.add('is-ok');
        err.textContent = '入力OKです！（デモのため送信はしません）';
      }
    });
  });
})();

<div class="bnto-checkall" data-bnto-checkall>
  <label class="all"><input type="checkbox" class="parent">すべて選択</label>
  <label><input type="checkbox" class="child">りんご</label>
  <label><input type="checkbox" class="child">みかん</label>
  <label><input type="checkbox" class="child">バナナ</label>
  <!-- .child を必要な数だけ -->
</div>

.bnto-checkall {
  --c1: hsl(258 47% 54%);  /* チェック色 */
  max-width: 290px; background: #fff;
  border: 2px solid #DFE9F1; border-radius: 14px;
  padding: 4px 15px;
}
.bnto-checkall label {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0; font-weight: 700; cursor: pointer;
}
.bnto-checkall label.all {
  border-bottom: 2px dashed #DFE9F1; font-weight: 800;
}
/* accent-color でチェックの色を変更 */
.bnto-checkall input {
  width: 17px; height: 17px; margin: 0;
  accent-color: var(--c1); cursor: pointer;
}

// 親チェックで全選択／子の状態で親を同期（一部なら indeterminate）
(function () {
  document.querySelectorAll('[data-bnto-checkall]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var parent = box.querySelector('.parent');
    var kids = Array.prototype.slice.call(box.querySelectorAll('.child'));
    function sync() {
      var on = kids.filter(function (c) { return c.checked; }).length;
      parent.checked = on === kids.length;
      parent.indeterminate = on > 0 && on < kids.length;
    }
    parent.addEventListener('change', function () {
      kids.forEach(function (c) { c.checked = parent.checked; });
    });
    kids.forEach(function (c) { c.addEventListener('change', sync); });
  });
})();

<form class="bnto-once" data-bnto-once>
  <input type="text" placeholder="お問い合わせ内容" aria-label="お問い合わせ内容">
  <button type="submit" class="bt">送信する</button>
  <p class="st" aria-live="polite"></p>
</form>

.bnto-once {
  --c1: hsl(26 90% 52%);  /* ボタン色 */
  display: flex; flex-direction: column; gap: 9px;
  max-width: 290px;
}
.bnto-once input {
  display: block; width: 100%; padding: 10px 12px;
  border: 2px solid #DFE9F1; border-radius: 11px;
  background: #fff; font: inherit;
}
.bnto-once input:focus { outline: none; border-color: var(--c1); }
.bnto-once .bt {
  padding: 11px; border: none; border-radius: 11px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: opacity .2s;
}
/* 送信中の見た目 */
.bnto-once .bt:disabled { opacity: .55; cursor: not-allowed; }
.bnto-once .st {
  margin: 0; min-height: 1em;
  font-size: 11.5px; font-weight: 800; color: #8a8478;
}

// 送信中はボタンを無効化して連打（二重送信）を防止
(function () {
  document.querySelectorAll('[data-bnto-once]').forEach(function (form) {
    if (form.dataset.bntoInit) return;
    form.dataset.bntoInit = '1';
    var btn = form.querySelector('button[type="submit"]');
    var label = btn.textContent;
    var st = form.querySelector('.st');
    form.addEventListener('submit', function (e) {
      e.preventDefault(); // デモ用。実運用ではこの行を削除すると送信されます
      if (btn.disabled) return;
      btn.disabled = true;
      btn.textContent = '送信中…';
      st.textContent = '送信処理中です…';
      // ▼デモ用：2秒後に復帰（実運用ではこの setTimeout ごと削除）
      setTimeout(function () {
        btn.disabled = false;
        btn.textContent = label;
        st.textContent = '送信が完了しました（デモ）';
      }, 2000);
    });
  });
})();

<!-- data-key がそのまま確認欄の項目名になる -->
<div class="bnto-confirm" data-bnto-confirm>
  <input type="text" data-key="お名前" placeholder="お名前" aria-label="お名前">
  <input type="email" data-key="メールアドレス" placeholder="メールアドレス" aria-label="メールアドレス">
  <button type="button" class="go">確認する</button>
  <dl class="view" aria-live="polite"></dl>
</div>

.bnto-confirm {
  --c1: hsl(150 55% 40%);  /* フォーカス・ボタン色 */
  display: flex; flex-direction: column; gap: 9px;
  max-width: 290px;
}
.bnto-confirm input {
  display: block; width: 100%; padding: 10px 12px;
  border: 2px solid #DFE9F1; border-radius: 11px;
  background: #fff; font: inherit;
}
.bnto-confirm input:focus { outline: none; border-color: var(--c1); }
.bnto-confirm .go {
  padding: 11px; border: none; border-radius: 11px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* 確認プレビュー（中身が入ったら表示） */
.bnto-confirm .view {
  display: none; margin: 0; padding: 11px 13px;
  background: #F8F4EA; border-radius: 11px;
}
.bnto-confirm.is-view .view { display: block; }
.bnto-confirm .view dt { font-size: 10.5px; font-weight: 800; color: #8a8478; }
.bnto-confirm .view dd { margin: 1px 0 7px; font-weight: 700; }

// 「確認する」で入力値を dl 形式のプレビューに反映
(function () {
  document.querySelectorAll('[data-bnto-confirm]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var btn = box.querySelector('.go');
    var view = box.querySelector('.view');
    btn.addEventListener('click', function () {
      view.textContent = '';
      box.querySelectorAll('[data-key]').forEach(function (field) {
        var dt = document.createElement('dt');
        dt.textContent = field.dataset.key;
        var dd = document.createElement('dd');
        dd.textContent = field.value || '（未入力）';
        view.appendChild(dt);
        view.appendChild(dd);
      });
      box.classList.add('is-view');
    });
  });
})();

<!-- inputmode="numeric" でスマホは数字キーボードに -->
<input class="bnto-zip" data-bnto-zip type="text" inputmode="numeric" maxlength="8" placeholder="1234567" aria-label="郵便番号">

.bnto-zip {
  --c1: hsl(190 62% 42%);  /* フォーカス色 */
  width: 150px; padding: 11px 13px;
  border: 2px solid #DFE9F1; border-radius: 12px;
  background: #fff; font: inherit; font-weight: 700;
  letter-spacing: .06em;
  transition: border-color .2s;
}
.bnto-zip:focus { outline: none; border-color: var(--c1); }

// 数字以外を除去して 123-4567 形式に自動整形（全角数字もOK）
(function () {
  document.querySelectorAll('[data-bnto-zip]').forEach(function (input) {
    if (input.dataset.bntoInit) return;
    input.dataset.bntoInit = '1';
    input.addEventListener('input', function () {
      var v = input.value
        .replace(/[０-９]/g, function (s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); })
        .replace(/[^0-9]/g, '').slice(0, 7);
      input.value = v.length > 3 ? v.slice(0, 3) + '-' + v.slice(3) : v;
    });
  });
})();

<div class="bnto-unsaved" data-bnto-unsaved>
  <input type="text" placeholder="ここに何か入力してみてください" aria-label="メモ">
  <div class="row">
    <span class="badge">● 未保存の変更あり</span>
    <a href="#" class="leave">別のページへ移動 →</a>
  </div>
  <p class="st" aria-live="polite"></p>
</div>

.bnto-unsaved {
  --c1: hsl(41 95% 45%);  /* 警告アクセント色 */
  display: flex; flex-direction: column; gap: 9px;
  max-width: 290px;
}
.bnto-unsaved input {
  display: block; width: 100%; padding: 10px 12px;
  border: 2px solid #DFE9F1; border-radius: 11px;
  background: #fff; font: inherit;
}
.bnto-unsaved input:focus { outline: none; border-color: var(--c1); }
.bnto-unsaved .row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px; min-height: 20px;
}
/* 変更があると出るバッジ */
.bnto-unsaved .badge {
  display: none;
  font-size: 11px; font-weight: 800; color: var(--c1);
}
.bnto-unsaved.is-dirty .badge { display: inline-block; }
.bnto-unsaved .leave {
  margin-left: auto;
  font-size: 12.5px; font-weight: 800; color: var(--c1);
}
.bnto-unsaved .st {
  margin: 0; min-height: 1em;
  font-size: 11.5px; font-weight: 800; color: #8a8478;
}

// フォーム変更後にリンクを押すと確認ダイアログ（デモ内で完結）
(function () {
  document.querySelectorAll('[data-bnto-unsaved]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var dirty = false;
    var st = box.querySelector('.st');
    box.querySelectorAll('input, textarea, select').forEach(function (field) {
      field.addEventListener('input', function () {
        dirty = true;
        box.classList.add('is-dirty');
      });
    });
    box.querySelector('.leave').addEventListener('click', function (e) {
      e.preventDefault(); // デモ用リンクなので実際には移動しません
      if (dirty && !confirm('変更が保存されていません。移動しますか？')) {
        st.textContent = '移動をキャンセルしました';
        return;
      }
      dirty = false;
      box.classList.remove('is-dirty');
      st.textContent = '移動しました（デモ）';
    });
    // 実運用でページ離脱全体を守るなら beforeunload が定番：
    // window.addEventListener('beforeunload', function (e) {
    //   if (dirty) e.preventDefault();
    // });
  });
})();

<!-- ゲージは i を4つ（4段階） -->
<div class="bnto-pwmeter" data-bnto-pwmeter>
  <input type="password" placeholder="パスワードを入力" aria-label="パスワード" autocomplete="new-password">
  <div class="gauge" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
  <p class="lv" aria-live="polite"></p>
</div>

.bnto-pwmeter {
  --c1: hsl(280 45% 52%);  /* フォーカス色 */
  max-width: 290px;
}
.bnto-pwmeter input {
  display: block; width: 100%; padding: 11px 13px;
  border: 2px solid #DFE9F1; border-radius: 12px;
  background: #fff; font: inherit;
  transition: border-color .2s;
}
.bnto-pwmeter input:focus { outline: none; border-color: var(--c1); }
/* 4段ゲージ */
.bnto-pwmeter .gauge { display: flex; gap: 5px; margin-top: 9px; }
.bnto-pwmeter .gauge i {
  flex: 1; height: 6px; border-radius: 3px;
  background: #DFE9F1; transition: background .25s;
}
.bnto-pwmeter .lv {
  margin: 7px 0 0; min-height: 1em;
  font-size: 11.5px; font-weight: 800;
  color: var(--lv, #8a8478); transition: color .25s;
}
/* 強度ごとの色（赤→黄→青→緑） */
.bnto-pwmeter.is-1 { --lv: #E0453A; }
.bnto-pwmeter.is-2 { --lv: hsl(41 95% 45%); }
.bnto-pwmeter.is-3 { --lv: hsl(210 72% 50%); }
.bnto-pwmeter.is-4 { --lv: hsl(150 55% 38%); }
/* 強度ぶんだけゲージを点灯 */
.bnto-pwmeter.is-1 .gauge i:nth-child(-n+1),
.bnto-pwmeter.is-2 .gauge i:nth-child(-n+2),
.bnto-pwmeter.is-3 .gauge i:nth-child(-n+3),
.bnto-pwmeter.is-4 .gauge i:nth-child(-n+4) { background: var(--lv); }

// 長さ8+ / 大小英字 / 数字 / 記号 の充足数で4段階判定（デモ用の簡易ロジック）
(function () {
  document.querySelectorAll('[data-bnto-pwmeter]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var input = box.querySelector('input');
    var lv = box.querySelector('.lv');
    var names = ['', '弱い', '普通', '強い', 'とても強い'];
    input.addEventListener('input', function () {
      var v = input.value;
      var score = 0;
      if (v.length >= 8) score++;                       // 8文字以上
      if (/[a-z]/.test(v) && /[A-Z]/.test(v)) score++;  // 大小英字
      if (/[0-9]/.test(v)) score++;                     // 数字
      if (/[^A-Za-z0-9]/.test(v)) score++;              // 記号
      var level = v ? Math.max(score, 1) : 0;           // 入力があれば最低「弱い」
      box.classList.remove('is-1', 'is-2', 'is-3', 'is-4');
      if (level) box.classList.add('is-' + level);
      lv.textContent = level ? '強度：' + names[level] : '';
    });
  });
})();

<!-- 欄を離れた瞬間（blur）に全角数字・ハイフンを半角へ正規化 -->
<div class="bnto-zenhan" data-bnto-zenhan>
  <input type="tel" inputmode="tel" placeholder="０９０－１２３４－５６７８" aria-label="電話番号">
  <p class="st" aria-live="polite"></p>
</div>

.bnto-zenhan {
  --c1: hsl(217 70% 48%);  /* フォーカス・通知色 */
  max-width: 290px;
}
.bnto-zenhan input {
  display: block; width: 100%; padding: 11px 13px;
  border: 2px solid #DFE9F1; border-radius: 12px;
  background: #fff; font: inherit; font-weight: 700;
  letter-spacing: .04em;
  transition: border-color .2s;
}
.bnto-zenhan input:focus { outline: none; border-color: var(--c1); }
.bnto-zenhan .st {
  margin: 7px 0 0; min-height: 1em;
  font-size: 11.5px; font-weight: 800; color: #8a8478;
}
/* 変換したことをさりげなく知らせる */
.bnto-zenhan.is-fixed .st { color: var(--c1); }

// blur時に全角数字→半角、全角ハイフン類→半角ハイフン、空白は除去
(function () {
  document.querySelectorAll('[data-bnto-zenhan]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var input = box.querySelector('input');
    var st = box.querySelector('.st');
    input.addEventListener('blur', function () {
      var before = input.value;
      var after = before
        .replace(/[０-９]/g, function (s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); })
        .replace(/[ー−―‐－]/g, '-')
        .replace(/\s+/g, '');
      if (before === after) return;
      input.value = after;
      if (st) {
        box.classList.add('is-fixed');
        st.textContent = '半角に変換しました：' + after;
      }
    });
  });
})();

<!-- data-show-on の値と .src の選択値が一致した .extra だけ表示される -->
<div class="bnto-condform" data-bnto-condform>
  <select class="src" aria-label="お問い合わせ種別">
    <option value="資料請求">資料請求</option>
    <option value="お見積もり">お見積もり</option>
    <option value="その他">その他</option>
  </select>
  <div class="extra" data-show-on="お見積もり" hidden>
    <input type="text" placeholder="ご予算" aria-label="ご予算">
  </div>
  <div class="extra" data-show-on="その他" hidden>
    <input type="text" placeholder="お問い合わせ内容" aria-label="お問い合わせ内容">
  </div>
</div>

.bnto-condform {
  --c1: hsl(292 45% 52%);  /* アクセント色 */
  display: flex; flex-direction: column; gap: 9px;
  max-width: 290px;
}
.bnto-condform select, .bnto-condform input {
  display: block; width: 100%; padding: 10px 12px;
  border: 2px solid #DFE9F1; border-radius: 11px;
  background: #fff; font: inherit;
  transition: border-color .2s;
}
.bnto-condform select:focus, .bnto-condform input:focus { outline: none; border-color: var(--c1); }
/* 条件を満たしたときだけ現れる追加項目 */
.bnto-condform .extra {
  display: flex; flex-direction: column; gap: 9px;
  padding: 10px;
  background: #F6FAFD;
  border: 2px dashed var(--c1); border-radius: 11px;
}
.bnto-condform .extra[hidden] { display: none; }

// 選択値に応じて追加項目を表示／非表示（required も自動で付け外し）
(function () {
  document.querySelectorAll('[data-bnto-condform]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var src = box.querySelector('.src');
    function update() {
      box.querySelectorAll('[data-show-on]').forEach(function (extra) {
        var show = extra.getAttribute('data-show-on') === src.value;
        extra.hidden = !show;
        extra.querySelectorAll('input, textarea, select').forEach(function (field) {
          field.required = show;      // 非表示の項目は必須から外す
          if (!show) field.value = ''; // 隠すときは入力もクリア
        });
      });
    }
    src.addEventListener('change', update);
    update();
  });
})();

<!-- data-key が localStorage の保存キー（フォームごとに変える） -->
<div class="bnto-draft" data-bnto-draftsave data-key="contact-draft">
  <div class="bar" hidden>
    <span>下書きを復元しますか？</span>
    <span class="bts"><button type="button" class="yes">復元</button><button type="button" class="no">破棄</button></span>
  </div>
  <textarea rows="3" placeholder="お問い合わせ内容" aria-label="お問い合わせ内容"></textarea>
  <p class="st" aria-live="polite"></p>
</div>

.bnto-draft {
  --c1: hsl(150 55% 40%);  /* アクセント色 */
  display: flex; flex-direction: column; gap: 9px;
  max-width: 290px;
}
/* 再訪時に出る復元バー */
.bnto-draft .bar {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  padding: 8px 10px;
  background: #FFF8E6; border: 2px solid hsl(41 95% 45%);
  border-radius: 11px;
  font-size: 11.5px; font-weight: 800;
}
.bnto-draft .bar[hidden] { display: none; }
.bnto-draft .bar .bts { display: flex; gap: 5px; }
.bnto-draft .bar button {
  padding: 5px 10px; border: none; border-radius: 8px;
  font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
}
.bnto-draft .bar .yes { background: var(--c1); color: #fff; }
.bnto-draft .bar .no { background: #fff; color: #5A6B7A; border: 2px solid #DFE9F1; }
.bnto-draft textarea {
  display: block; width: 100%; min-height: 72px;
  padding: 10px 12px;
  border: 2px solid #DFE9F1; border-radius: 12px;
  background: #fff; font: inherit; line-height: 1.7;
  resize: vertical; transition: border-color .2s;
}
.bnto-draft textarea:focus { outline: none; border-color: var(--c1); }
.bnto-draft .st {
  margin: 0; min-height: 1em;
  font-size: 11.5px; font-weight: 800; color: #8a8478;
}

// 入力を localStorage へ自動保存し、再訪時に復元バーを表示
(function () {
  document.querySelectorAll('[data-bnto-draftsave]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var field = box.querySelector('textarea, input');
    var bar = box.querySelector('.bar');
    var st = box.querySelector('.st');
    var key = box.getAttribute('data-key') || 'bnto-draft';
    var saved = '';
    try { saved = localStorage.getItem(key) || ''; } catch (e) {}
    // 保存済みの下書きがあれば復元バーを出す
    if (saved && saved !== field.value) bar.hidden = false;
    box.querySelector('.yes').addEventListener('click', function () {
      field.value = saved;
      bar.hidden = true;
      st.textContent = '下書きを復元しました';
    });
    box.querySelector('.no').addEventListener('click', function () {
      try { localStorage.removeItem(key); } catch (e) {}
      bar.hidden = true;
      st.textContent = '下書きを破棄しました';
    });
    // 入力が止まってから0.4秒後に保存（打鍵ごとの書き込みを防ぐ）
    field.addEventListener('input', function () {
      clearTimeout(box._t);
      box._t = setTimeout(function () {
        try {
          if (field.value) localStorage.setItem(key, field.value);
          else localStorage.removeItem(key);
        } catch (e) {}
        st.textContent = field.value ? '下書きを自動保存しました' : '';
      }, 400);
    });
  });
})();