如何实现Textbox自动移除空格后所有字符的功能

• 解决问题：规避用户输入失误带来的无效内容，无需对拆分字符串做拼接处理，直接丢弃空格后输入的所有内容
• 触发时机：点击Save/Confirm（保存/确认）按钮时执行处理
• 处理规则：自动移除输入内容中空格后的所有部分，仅保留第一个空格前的有效内容
• 效果参考：
  

核心逻辑非常简单，定位字符串中第一个空格的位置，直接截取开头到该位置的子串即可，不需要复杂的拆分、拼接操作。

原生JavaScript通用实现 #

// 替换为你页面中实际的按钮、输入框选择器
const confirmButton = document.querySelector('.confirm-btn');
const targetInput = document.querySelector('.target-input');

confirmButton.addEventListener('click', () => {
  const inputVal = targetInput.value;
  const firstSpacePos = inputVal.indexOf(' ');
  // 存在空格时才做截断处理
  if (firstSpacePos > -1) {
    targetInput.value = inputVal.slice(0, firstSpacePos);
  }
  // 此处追加原有保存、提交的业务逻辑
});

常见框架适配写法（以Vue3为例） #

<template>
  <input v-model="formData.inputContent" placeholder="请输入内容" />
  <button @click="handleSave">保存/确认</button>
</template>

<script setup>
import { reactive } from 'vue'
const formData = reactive({
  inputContent: ''
})

const handleSave = () => {
  const firstSpacePos = formData.inputContent.indexOf(' ')
  if (firstSpacePos > -1) {
    formData.inputContent = formData.inputContent.slice(0, firstSpacePos)
  }
  // 此处追加接口提交等后续业务逻辑
}
</script>

兼容补充 #

如果业务场景中用户可能误输入全角空格，只需要在定位空格前增加一步全角转半角空格的处理即可：

const formatVal = inputVal.replace(/\u3000/g, ' ')
const firstSpacePos = formatVal.indexOf(' ')

内容的提问来源于stack exchange，提问作者Steven Lippert