← カテゴリ一覧に戻る

入力値のリアルタイム処理

input oninput debounce IMEComposition

入力に応じてリアルタイムで処理を行うパターンをまとめます。パフォーマンス最適化（デバウンス）も重要です。

デモ①：文字数カウント

0 / 200

デモ②：デバウンス付きサジェスト（400ms）

デモ③：入力フォーマット（自動整形）

コード例

js
// input イベント（値が変わるたびに発火）
input.addEventListener('input', (e) => {
  const value = e.target.value;
  charCounter.textContent = value.length + '/200';
});

// change イベント（フォーカスが外れたとき）
input.addEventListener('change', (e) => {
  console.log('確定値:', e.target.value);
});

// デバウンス（頻繁な呼び出しを間引く）
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const search = debounce((query) => {
  fetchSuggestions(query); // APIを呼ぶ
}, 400); // 入力停止後400msで実行

input.addEventListener('input', (e) => search(e.target.value));

// IME変換中は処理をスキップ（日本語入力対応）
let isComposing = false;
input.addEventListener('compositionstart', () => isComposing = true);
input.addEventListener('compositionend', () => {
  isComposing = false;
  handleInput(input.value); // 確定後に処理
});
input.addEventListener('input', () => {
  if (!isComposing) handleInput(input.value);
});

NEWe.inputType で入力方法を判別（InputEvent）

input イベントの e.inputType で、どのような操作で入力されたかを判別できます。

js
input.addEventListener('input', (e) => {
  console.log(e.inputType);
  // "insertText"       : 通常の文字入力
  // "deleteContentBackward" : Backspace
  // "insertFromPaste"  : ペースト
  // "insertFromDrop"   : ドラッグ&ドロップ
  // "historyUndo"      : Ctrl+Z
  // "insertReplacementText" : 予測変換

  // ペーストのみ処理を分ける
  if (e.inputType === 'insertFromPaste') {
    sanitizePastedContent(e.target.value);
  }
});

🤖 AIプロンプトテンプレート

以下のようなinputイベントのリアルタイム処理に関するサンプルコードを生成してください：
- inputイベントで文字数カウントをリアルタイム更新する実装
- debounce関数を使って入力停止後にAPI検索を実行するパターン
- e.inputTypeを使って入力方法（テキスト・ペースト・削除）を判別する方法
- compositionstart / compositionendを使った日本語IME入力対応
- 電話番号・クレジットカード番号の自動フォーマット（ハイフン挿入など）

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo