Question

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

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

我这样做，空格没有被阻止

var
  field = document.querySelector('[name="username"]');

field.addEventListener('keypress', function ( event ) {  
   var 
     key = event.keyCode;

   return (key !== 32);
});

Answer 1

使用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);
};

Answer 2

修改输入，如：

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

然后javascript是：

<script type="text/javascript">

function CheckSpace(event)
{
   if(event.which ==32)
   {
      event.preventDefault();
      return false;
   }
}

Answer 3

尝试检查此处列出的所有不同类型的空格Are there other whitespace codes like &nbsp for half-spaces, em-spaces, en-spaces etc useful in 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

Answer 4

万一有人需要这样做，这将自动替换所有空格，并且不允许用户放置空格，并迫使他们将用户名放在没有空格的位置，即使复制粘贴也是如此。这是代码。

<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>

如何使用普通的javascript来防止输入字段中的空格

4 个答案: