CODEWITHSUNDEEP
javascript
Alexandre Demelas
Alexandre Demelas

Reputation: 4690

How prevent whitespace in input field with plain javascript

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

Upvotes: 9

Views: 36526

Answers (7)

Vaibhaw Kumar
Vaibhaw Kumar

Reputation: 1

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

Upvotes: 0

Compty Adel
Compty Adel

Reputation: 51

        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 !

Upvotes: 0

kilian
kilian

Reputation: 166

HTML only solution using the pattern attribute and regex.

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

Upvotes: 0

Md. Amanur Rahman
Md. Amanur Rahman

Reputation: 179

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>

Upvotes: 2

fuyushimoya
fuyushimoya

Reputation: 9813

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

Upvotes: 18

Mr. B
Mr. B

Reputation: 2975

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

Upvotes: 4

Keith M
Keith M

Reputation: 1239

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

Upvotes: 2

Related Questions