I have an username input field and trying to prevent user fill them with white spaces.

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

i do this and whitespace isn't blocked

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

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

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

I have an username input field and trying to prevent user fill them with white spaces.

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

i do this and whitespace isn't blocked

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

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

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

• javascript

7 Answers 7

Use event.preventDefault to prevent its default behavior.

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

If you want to use the return false;, then you should use the onkeypress of the input instead, jsfiddle

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

Modify the input like:

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

Then the javascript is:

<script type="text/javascript">

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

Try checking for all the different kinds of whitespaces listed here Are there other whitespace codes like &nbsp for half-spaces, em-spaces, en-spaces etc useful in HTML?

So you code would be:

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

Here is the complete list of all the different kinds of whitespaces: https://en.wikipedia.org/wiki/Whitespace_character#Spaces_in_Unicode

In case anyone needs this to be done which will replace all whitespace automatically and will not allow user to put space and will force them to put username without space even then copy paste . Here is the code.

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

HTML only solution using the pattern attribute and regex.

<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()
        }

here is a simple solution !

Hey i have simple solution regarding your question try one

If you want to submit only text and whitespace than use this one

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

If you want to submit number and whitespace than use this one

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

If you want to insert text not whitespace than use this one

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

Use any line according to your requirements no extra line of code or condition simple and secure