onblur 不起作用，但 onchange 有效吗？ [关闭]

Question

我错过了什么吗？我的 onblur 脚本不起作用，但如果我将它设置为 onchange，它就会起作用，我只运行这两个脚本来对一些 HTML 输入进行一些验证

脚本#1的目的是检查是否有空格，表示用户输入了名字和姓氏（可能有更好的方法）

脚本 #2 的目的是检查用户退出输入字段时空格是否为空白

Javascript

  // Script #1
document.getElementById('name').onchange=function() {
  var theName = document.getElementById('name').value;

  if (theName.indexOf(' ') <= 0) {
    document.getElementById('name_error').innerHTML = "Must include first and last name";
  }
}


  // Script #2
document.getElementById('name').onBlur=function() {
  if (document.getElementById('name').value=="") {
    document.getElementById('name_error').innerHTML = "The name field is required";
  }
}

HTML

<label for="name" id="name_label">Name<span class="red">* </span></label><br>
<span id="name_error" class="hint"></span>
<input type="text" name="name" id="name" pattern="[A-Za-z0-9 ]" 
 placeholder="Full name please" maxlength="25" autofocus required>

Answer 1

您的代码中有一个错字，只需将onBlur 替换为onblur。

document.getElementById('name').onblur = function() {
  if (document.getElementById('name').value === '') {
    document.getElementById('name_error').innerHTML = 'The name field is required';
  }
}

<label for="name" id="name_label">Name<span class="red">* </span></label><br>
<span id="name_error" class="hint"></span>
<input type="text" name="name" id="name" pattern="[A-Za-z0-9 ]" placeholder="Full name please" maxlength="25" autofocus required>

另请注意，使用addEventListener 函数处理DOM 元素中的事件 是一种更好的做法：

document.getElementById('name').addEventListener('blur', function(event) {
  // your code...
});

查看this link 以获取更多信息。

Answer 2

您的代码中有错字：onblur。不是onBlur。

document.getElementById('name').onblur=function() {
  if (document.getElementById('name').value=="") {
    document.getElementById('name_error').innerHTML = "The name field is required";
  } else {
    // do something with this 'name'
  }
}

<label for="name" id="name_label">Name<span class="red">* </span></label><br>
      <span id="name_error" class="hint"></span>
      <input type="text" name="name" id="name" pattern="[A-Za-z0-9 ]" 
      placeholder="Full name please" maxlength="25" autofocus required>