如何禁用input type="text"输入框中的空格？求代码修改示例

下面提供几种实用的方法来实现禁止或移除输入框中的空格：

方法1：实时移除输入的空格（简洁版） #

直接在input标签中添加oninput事件，输入或粘贴空格时自动移除：

<input type="text" id="username" name="username" class="{{ \App\getAllClasses()['text'] }}" placeholder="Username" oninput="this.value = this.value.replace(/\s/g, '')">

方法2：分离结构与行为（更优雅） #

把JS逻辑从HTML标签中抽离，便于后续维护：

<input type="text" id="username" name="username" class="{{ \App\getAllClasses()['text'] }}" placeholder="Username">

<script>
document.getElementById('username').addEventListener('input', function() {
  // 全局替换所有空白字符（包括空格、制表符等）
  this.value = this.value.replace(/\s/g, '');
});
</script>

方法3：阻止空格输入+移除粘贴空格（体验最优） #

既阻止用户按空格输入，又处理粘贴进来的空格，双重保障：

<input type="text" id="username" name="username" class="{{ \App\getAllClasses()['text'] }}" placeholder="Username">

<script>
const input = document.getElementById('username');

// 阻止空格键输入
input.addEventListener('keydown', function(e) {
  if (e.key === ' ') {
    e.preventDefault();
  }
});

// 移除粘贴或其他方式进入的空格
input.addEventListener('input', function() {
  this.value = this.value.replace(/\s/g, '');
});
</script>

方法4：表单提交时验证（仅提示） #

如果不需要实时处理，可通过HTML5的pattern属性在提交表单时验证，提示用户不能输入空格：

<input type="text" id="username" name="username" class="{{ \App\getAllClasses()['text'] }}" placeholder="Username" pattern="^\S+$" title="用户名不能包含空格">

注意：前端验证仅用于提升用户体验，为了数据安全，建议在后端也做一次空格过滤或验证。

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