Fixing you code
You should use Event.preventDefault() instead of return false, as that's specific to jQuery.
You should also use keydown instead of keyup, as keyup fires after the default action, so it's too late to prevent it. keypress could also be an option.
Also, KeyboardEvent.which returns a number, not a string, so it would be better to do e.which === 32 instead of e.which == '32':
document.querySelector('#upperCase').addEventListener('keydown', (e) => {
console.log(e.which);
if (e.which === 32) {
e.preventDefault();
}
});
#upperCase {
text-transform: uppercase;
}
<form>
<input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>
Sidenote on how to get the pressed key
However, just as a side note, note both KeyboardEvent.which and KeyboardEvent.keyCode are currently deprecated. They newer options are KeyboardEvent.key and KeyboardEvent.code, but browser support is not great yet.
2022 update:
This answer is a bit old. Now you should be perfectly fine using e.key and e.code instead of e.keyCode and e.which, unless you need to support really old browsers.
You can easily check their values at https://keyjs.dev/.
The updated answer looks like this:
document.querySelector('#upperCase').addEventListener('keydown', function(e) {
console.log(e.code);
if (e.code === 'Space') {
e.preventDefault();
}
});
#upperCase {
text-transform: uppercase;
}
<form>
<input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>
Using a RegExp to ONLY validate the field
Regarding your question about whether it is possible to use a RegExp, yes, you can use a RegExp.
However, note that you can't use it in the pattern HTML attribute if you want to prevent any invalid characters from appearing in the input field, as that would only validate its value when the form it belongs to is submitted, as you can see here:
document.getElementById('form').onsubmit = (e) => {
e.preventDefault();
};
<form id="form">
<input pattern = "\w*" type="text">
<button>SUBMIT</button>
<form>
Using a RegExp to prevent the keyDown event based on the input's value
Also, using a RegExp inside the keydown event listener to validate the input's value won't work as you will get the previous value, the one before the last key stroke:
document.querySelector('#upperCase').addEventListener('keydown', function(e) {
const isInalid = !/^\w*$/.test(this.value);
console.log(`value = "${ this.value }", which is ${ /^\w*$/.test(this.value) ? 'still valid.' : 'now invalid.' }`);
if (isInalid) {
e.preventDefault();
}
});
#upperCase {
text-transform: uppercase;
}
<form>
<input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>
Using a RegExp to prevent the keyDown event based on the pressed key
However, you can use a RegExp to validate each pressed key if you use KeyboardEvent.key:
document.querySelector('#upperCase').addEventListener('keydown', function(e) {
const key = e.key;
const isCharacter = key.length === 1;
console.log(`e.key = ${ key } (${ isCharacter ? 'character' : 'special key' })`);
// We don't want to prevent special keys like backspace or delete:
if (isCharacter && !/\w/.test(e.key)) {
e.preventDefault();
}
});
#upperCase {
text-transform: uppercase;
}
<form>
<input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>
Note you can still do something similar to this using e.which, but in that case you won't use a RegExp.
✨ Using a RegExp to enforce a certain format from an input event
What you can do if you need a more advanced behaviour, such as formatting the input's value in a really specific way, is to use the input event instead.
For example, imagine we want an input field for numeric values with thousands separators. A super basic implementation would look something like this:
document.querySelector('#upperCase').addEventListener('input', function(e) {
const numericValueMatch = this.value.match(/\d+/g);
if (!numericValueMatch) {
this.value = '';
return;
}
const valueAsNumber = parseInt(numericValueMatch.join(''));
console.log(`valueAsNumber = ${ valueAsNumber }`);
// toLocaleString is not the best option, but that's ok for this example:
this.value = valueAsNumber.toLocaleString();
});
<input id="upperCase" maxlength="10" type="text" />
Note this is just a super basic demo. You would need additional logic to keep the cursor's position after each key press and to make this work fine in general. The ideal solution would probably listen to more than a single event.
