如何使用纯javascript防止输入字段中出现空白

How prevent whitespace in input field with plain javascript

本文关键字：字段 空白 输入 何使用 javascript      更新时间：2023-09-26

我有一个用户名输入字段，并试图阻止用户用空格填充它们。

<input type="text" name="username" />

我这样做，空白不会被阻止

var
  field = document.querySelector('[name="username"]');
field.addEventListener('keypress', function ( event ) {  
   var 
     key = event.keyCode;
   return (key !== 32);
});

使用event.preventDefault来阻止其默认行为。

var field = document.querySelector('[name="username"]');
field.addEventListener('keypress', function ( event ) {  
   var key = event.keyCode;
    if (key === 32) {
      event.preventDefault();
    }
});
<input type="text" name="username" />

如果你想使用return false;，那么你应该使用输入的onkeypress，jsfiddle

field.onkeypress = function(e) {
   var  key = e.keyCode;
   return (key !== 32);
};

修改输入，如：

<input type="text" name="username" onkeypress="CheckSpace(event)"/>

那么javascript是：

<script type="text/javascript">
function CheckSpace(event)
{
   if(event.which ==32)
   {
      event.preventDefault();
      return false;
   }
}

尝试检查此处列出的所有不同类型的空白是否还有其他空白代码，如&nbsp对于半空格、em空格、en空格等在HTML中有用吗？

所以你的代码应该是：

var field = document.querySelector('[name="username"]');
field.addEventListener('keypress', function ( event ) {  
   var 
   key = event.keyCode;
   return (key !== 32 && key !== 160 && key != 5760 && key != 8192 && key != 8192 && key != 8194 && key != 8195 && key != 8196 && key != 8197 && key != 8198 && key != 8199 && key != 8200 && key != 8201 && key != 8202 && key != 8232 && key != 8233 && key != 8239 && key != 8287 && key != 12288);
});

以下是所有不同类型的空白的完整列表：https://en.wikipedia.org/wiki/Whitespace_character#Spaces_in_Unicode

如果有人需要这样做，这将自动替换所有空白，不允许用户放置空格，并将强制他们放置没有空格的用户名，即使是复制粘贴。这是代码。

<script type="text/javascript">
var field = document.querySelector('[name="username"]');
field.addEventListener('keyup', function ( event ) {  
   var userName = field.value;
  userName = userName.replace(/'s/g, '');
  field.value = userName;
});
</script>

使用pattern属性和正则表达式的纯HTML解决方案。

<form>
 <input type="text" name="username" pattern="[^'s]+">
 <button type="submit">Submit</button>
</form>

        const key = e.keyCode
        const keyCodes = [
          32, 160, 5760, 8192, 8192, 8194, 8195, 8196, 8197, 8198, 8199,
          8200, 8201, 8202, 8232, 8233, 8239, 8287, 12288,
        ]
        if (keyCodes.some((val) => val === key)) {
          e.preventDefault()
        }

这里有一个简单的解决方案！

嘿，关于你的问题，我有一个简单的解决方案，试试

如果你只想提交文本和空白，那么就使用这个

<input type="text" name="Name" required pattern="[a-zA-Z ]+" >

如果你想提交数字和空白，请使用这个

<input type="text" name="Name" required pattern="[0-9 ]+" >

如果你想插入文本而不是空白，请使用这个

<input type="text" name="Name" required pattern="[a-zA-Z]+" >

根据您的要求使用任何一行无需额外的代码或条件简单安全的

相关文章：