Javascript limit character input

Dont let users enter what they are not supposed to with Javascript.

by M Shameer

HTML

<form>
  <input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>

CSS

#upperCase {
  text-transform: uppercase;
}

JavaScript

let allowedKeys = [..."01234567890abcdefghijklmnopqrstuvwxyz", "backspace"];

document.getElementById('upperCase').addEventListener('keydown', (e) => {
  console.log(e.key);
  if (!allowedKeys.includes(e.key.toLowerCase())) {
    e.preventDefault();
    return false;
  }
  e.target.value = e.target.value.toUpperCase();
});