テキストボックスの全角・半角スペースを自動削除する方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- スマートフォンなどの画面幅に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>全角・半角スペースを自動削除するテキストボックス</title>
  <!-- テキストボックスのCSSを読み込む -->
  <link rel="stylesheet" href="style.css">
  <!-- スペースを自動削除するJavaScriptを読み込む -->
  <script src="script.js" defer></script>
</head>
<body>
  <!-- テキストボックス全体の横幅を制御する親要素 -->
  <div class="textbox-space-auto-remove_container">
    <!-- 入力欄のラベル -->
    <label class="textbox-space-auto-remove_label" for="textbox-space-auto-remove-field">
      文字を入力してください
    </label>
    <!-- 全角・半角スペースを自動削除する入力欄 -->
    <input
      class="textbox-space-auto-remove_input"
      type="text"
      id="textbox-space-auto-remove-field"
      name="textbox-space-auto-remove-field"
      placeholder="例：山田 太郎"
      autocomplete="off"
    >
  </div>
</body>
</html>

/* =========================================
  テキストボックス全体の横幅
========================================= */

.textbox-space-auto-remove_container {
  width: 100%; /* 設置先の横幅に合わせて表示する */
  max-width: 480px; /* 最大横幅。大きくすると入力欄が横に広がる */
  margin: 0 auto; /* 上下の余白は0。左右中央に配置する */
  box-sizing: border-box; /* 余白や枠線を横幅に含める */
}

/* =========================================
  入力欄のラベル
========================================= */

.textbox-space-auto-remove_label {
  display: block; /* ラベルをブロック要素として表示する */
  margin-bottom: 10px; /* 下余白。大きくすると入力欄との間隔が広がる */
  color: #111827; /* ラベルの文字色 */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ。大きくすると太くなる */
}

/* =========================================
  テキストフィールド本体
========================================= */

.textbox-space-auto-remove_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 16px; /* 内側の余白。大きくすると入力欄が広がる */
  border: 2px solid #dbe5f1; /* 枠線。2pxを大きくすると太くなる */
  border-radius: 12px; /* 角丸。大きくすると丸みが強くなる */
  background: #ffffff; /* 入力欄の背景色 */
  color: #111827; /* 入力文字の色 */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  line-height: 1.5; /* 行の高さ。大きくすると文字の上下間隔が広がる */
  box-sizing: border-box; /* 枠線と余白を横幅に含める */
}

/* =========================================
  フォーカス時の表示
========================================= */

.textbox-space-auto-remove_input:focus {
  border-color: #2563eb; /* フォーカス時の枠線色 */
  outline: 3px solid rgba(37, 99, 235, 0.18); /* 外側の線。3pxを大きくすると太くなる */
}

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下の入力欄 */
  .textbox-space-auto-remove_input {
    padding: 14px; /* 内側の余白。スマートフォン表示時の高さを調整する */
  }

}

/* =========================================
  全角・半角スペースの自動削除
========================================= */

(function() {
  // スペースを削除する入力欄を取得
  const input = document.getElementById("textbox-space-auto-remove-field");

  // 全角・半角スペースを取り除く
  function removeSpaces() {
    const value = input.value;
    const start = input.selectionStart;
    const end = input.selectionEnd;

    // スペース削除後の文字列を作成
    const cleanedValue = value.replace(/[ \u3000]/g, "");

    // 入力内容に変更がなければ処理しない
    if (value === cleanedValue) {
      return;
    }

    // カーソルより前のスペース数を考慮する
    const newStart = value.slice(0, start).replace(/[ \u3000]/g, "").length;
    const newEnd = value.slice(0, end).replace(/[ \u3000]/g, "").length;

    // スペースを削除した文字列に置き換える
    input.value = cleanedValue;

    // カーソル位置と選択範囲を維持する
    input.setSelectionRange(newStart, newEnd);
  }

  // キーボード入力・貼り付け時に処理する
  input.addEventListener("input", function(event) {
    // 日本語入力の変換中は処理しない
    if (event.isComposing) {
      return;
    }

    removeSpaces();
  });

  // 日本語入力の確定後に処理する
  input.addEventListener("compositionend", removeSpaces);
})();