javascript - 在 Javascript 上使用 Keypress 触发空间按钮

Question

我为注册表单创建了一个脚本。在用户名字段中，不允许使用大写和空格。

当我运行下面的代码时，当我按下键盘上的空格时，会出现 2 个警报（“Space case true”和“upper case true”）。如果我按空格键，它应该只显示警报“Space case true”。如果在大写字段中输入，则“大写为真”。列中的所有错误都将被清除。
我的代码有问题吗？

document.getElementById("usr").addEventListener("keypress", keyPress);

function keyPress(e) {
  if (e.keyCode === 32) {
    alert('Space case true');
    return document.getElementById("usr").value = "";
  }
}

function inputUsername(e) {
  var character = document.getElementById("usr").value;
  if (character === "") {
    document.getElementById("usr").value;
  } else if (character === character.toUpperCase() || character !== character.toLowerCase()) {
    alert('upper case true');
    document.getElementById("usr").value = "";
  }
}

<form action="..." method="post">
  <div class="form-group">
    <label>First Name</label>
    <input type="text" name="first_name" class="form-control" value="John">
    <span class="help-block"></span>
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="last_name" class="form-control" value="Doe">
    <span class="help-block"><?php echo $last_name_err; ?></span>
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" name="email" class="form-control" value="[e-mail]">
    <span class="help-block"></span>
  </div>
  <div class="form-group">
    <label>Username</label>
    <input type="text" id="usr" name="username" class="form-control" value="" oninput="inputUsername()">
    <span class="help-block"></span>
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" name="password" class="form-control" value="">
    <span class="help-block"></span>
  </div>
  <div class="form-group">
    <label>Confirm Password</label>
    <input type="password" name="confirm_password" class="form-control" value="">
    <span class="help-block"></span>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" value="Submit">
    <input type="reset" class="btn btn-default" value="Clear">
  </div>
  <p>Already have an account? <a href="login.php">Login here</a>.</p>
</form>

标签： javascriptkeypress