JavaScriptでinputの入力欄にスペース、空白を入力させないようにする方法

JavaScriptでinputの入力欄にスペース、空白を入力させないようにするに方法なります。
フォームなどの入力欄作成時に使えるかと思います。

JavaScriptのreplace()メソッドを使う

<input id="input" type="text" value="" />

<script>
  const input = document.getElementById('input')
  input.addEventListener('input', () => {
    const inputCheck = /\s+/g // 空白の正規表現
    const value = input.value
    input.value = value.replace(inputCheck, '')
  })
</script>

JavaScriptのreplace()を使い、空白やスペースを除いてinputのvalueにセットし直してます。
空白があるかを判別したい時は、test()が使えます。

const inputCheck = /\s+/g;
const value = "abcdefg";
if (inputCheck.test(value)) {
  console.log('空白があります')
}

Vue.js(Nuxt.js)の場合

<template>
  <div>
    <input v-model="inputForm" type="text" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      inputForm: ''
    }
  },
  watch: {
    inputForm(inputForm) {
      const inputCheck = /\s+/g // 空白の正規表現
      this.inputForm = inputForm.replace(inputCheck, '')
    }
  }
})
</script>

Vue.js(Nuxt.js)の場合は、watchで入力を監視することで実装できます。

参考