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);
});
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   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>
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
HTML only solution using the pattern attribute and regex.
<form>
<input type="text" name="username" pattern="[^\s]+">
<button type="submit">Submit</button>
</form>
