【JavaScript】フォーム入力をリアルタイムで監視する方法｜input・change イベント・文字数カウント・ダーティ状態管理・デバウンス API 連携まで解説

const textInput = document.getElementById('textInput');
const selectEl  = document.getElementById('selectEl');

// input: テキスト入力は1文字ごとにリアルタイムで発火
textInput.addEventListener('input', (e) => {
  console.log('入力中:', e.target.value); // 文字を打つたびに実行
});

// change: テキスト入力はフォーカスが外れて値が変わったときだけ発火
textInput.addEventListener('change', (e) => {
  console.log('確定:', e.target.value);
});

// セレクトボックスは input でも change でも検知できるが change が一般的
selectEl.addEventListener('change', (e) => {
  console.log('選択:', e.target.value);
});

<div class="textarea-wrapper">
  <textarea
    id="tweetText"
    maxlength="140"
    placeholder="テキストを入力してください（最大140文字）"
    rows="4"
  ></textarea>
  <div class="char-counter">
    <span id="charCount">0</span> / <span id="charLimit">140</span>
  </div>
</div>

.textarea-wrapper {
  position: relative;
}

.char-counter {
  text-align: right;
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 4px;
  transition: color 0.2s;
}

.char-counter.near-limit {
  color: #f59e0b; /* 残り少なくなったら黄色 */
}

.char-counter.over-limit {
  color: #e11d48; /* 超えたら赤（maxlength があれば実際には超えない） */
}

const textarea  = document.getElementById('tweetText');
const countEl   = document.getElementById('charCount');
const counter   = document.querySelector('.char-counter');
const MAX_LEN   = parseInt(document.getElementById('charLimit').textContent, 10);

textarea.addEventListener('input', () => {
  const len = textarea.value.length;
  countEl.textContent = len;

  // 残り文字数に応じてスタイルを変更
  counter.classList.toggle('near-limit', len >= MAX_LEN * 0.8 && len < MAX_LEN);
  counter.classList.toggle('over-limit', len >= MAX_LEN);
});

<div class="profile-editor">
  <div class="field-group">
    <label for="displayName">表示名</label>
    <input type="text" id="displayName" placeholder="あなたの名前" maxlength="30">
  </div>
  <div class="field-group">
    <label for="bio">自己紹介</label>
    <textarea id="bio" rows="3" maxlength="160" placeholder="自己紹介を入力"></textarea>
  </div>
</div>
<div class="profile-preview">
  <h3 id="previewName">（未設定）</h3>
  <p id="previewBio" class="pre-wrap">（未設定）</p>
</div>

const nameInput  = document.getElementById('displayName');
const bioInput   = document.getElementById('bio');
const previewName = document.getElementById('previewName');
const previewBio  = document.getElementById('previewBio');

nameInput.addEventListener('input', () => {
  // textContent を使うことで XSS を防ぐ
  previewName.textContent = nameInput.value.trim() || '（未設定）';
});

bioInput.addEventListener('input', () => {
  previewBio.textContent = bioInput.value.trim() || '（未設定）';
  // CSS の white-space: pre-wrap で改行が保持される
});

const form        = document.getElementById('editForm');
let   initialData = null; // フォームの初期値を保存

// フォームの現在値を FormData でシリアライズして文字列化
function serializeForm(f) {
  return new URLSearchParams(new FormData(f)).toString();
}

// ページ読み込み時に初期値を記録
window.addEventListener('load', () => {
  initialData = serializeForm(form);
});

function isDirty() {
  return serializeForm(form) !== initialData;
}

// ページ離脱時に未保存の変更があれば確認
window.addEventListener('beforeunload', (e) => {
  if (isDirty()) {
    e.preventDefault();
    // モダンブラウザでは returnValue への代入が必要
    e.returnValue = ''; // ブラウザ標準のダイアログが表示される
  }
});

// フォーム送信後はダーティフラグをリセット
form.addEventListener('submit', () => {
  initialData = serializeForm(form); // 保存後の値を新しい初期値に
});

const planSelect  = document.getElementById('plan');
const optionCheck = document.getElementById('extraOption');
const priceEl     = document.getElementById('totalPrice');

const PLANS = {
  basic:    { label: 'ベーシック', price: 980 },
  standard: { label: 'スタンダード', price: 1980 },
  premium:  { label: 'プレミアム', price: 2980 },
};
const OPTION_PRICE = 500;

function updatePrice() {
  const plan  = PLANS[planSelect.value] ?? PLANS.basic;
  const extra = optionCheck.checked ? OPTION_PRICE : 0;
  const total = plan.price + extra;
  priceEl.textContent = `¥${total.toLocaleString()}/月`;
}

planSelect.addEventListener('change', updatePrice);
optionCheck.addEventListener('change', updatePrice);
updatePrice(); // 初期表示

const searchInput   = document.getElementById('searchInput');
const suggestionBox = document.getElementById('suggestions');
let   debounceTimer = null;

searchInput.addEventListener('input', () => {
  clearTimeout(debounceTimer);

  const query = searchInput.value.trim();
  if (!query) {
    suggestionBox.innerHTML = '';
    return;
  }

  // 300ms 入力が止まってから API を叩く
  debounceTimer = setTimeout(async () => {
    try {
      const res  = await fetch(`/api/suggest?q=${encodeURIComponent(query)}`);
      const data = await res.json();
      renderSuggestions(data.items);
    } catch (err) {
      console.error('サジェスト取得エラー:', err);
    }
  }, 300);
});

function renderSuggestions(items) {
  suggestionBox.innerHTML = '';
  if (!items.length) return;

  const ul = document.createElement('ul');
  items.forEach((item) => {
    const li = document.createElement('li');
    li.textContent = item.label; // textContent で XSS 防止
    li.addEventListener('click', () => {
      searchInput.value = item.label;
      suggestionBox.innerHTML = '';
    });
    ul.appendChild(li);
  });
  suggestionBox.appendChild(ul);
}

const form = document.getElementById('monitoredForm');

// input・change を form 要素でまとめてキャッチ（バブリングを利用）
function onFormChange(e) {
  const field = e.target;

  // フォーム要素以外は無視
  if (!field.name) return;

  console.log(`[${field.name}] 変化:`, field.type === 'checkbox' ? field.checked : field.value);

  // 変化したフィールドに応じた処理
  if (field.name === 'plan') updatePrice();
  if (field.name === 'bio')  updateCharCount();
}

form.addEventListener('input',  onFormChange);
form.addEventListener('change', onFormChange);

// 現在のフォーム全体の値を Object として取得
function getFormValues(f) {
  const data = {};
  new FormData(f).forEach((value, key) => {
    // 同名フィールド（複数チェックボックスなど）は配列にまとめる
    if (data[key] !== undefined) {
      data[key] = [].concat(data[key], value);
    } else {
      data[key] = value;
    }
  });
  return data;
}

let isComposing = false;

const input = document.getElementById('japaneseInput');

// IME 変換開始
input.addEventListener('compositionstart', () => {
  isComposing = true;
});

// IME 変換確定
input.addEventListener('compositionend', () => {
  isComposing = false;
  handleInput(); // 変換確定後に処理を実行
});

input.addEventListener('input', () => {
  if (isComposing) return; // 変換中はスキップ
  handleInput();
});

function handleInput() {
  console.log('確定された値:', input.value);
}