失去焦点事件(onblur)无效，但更改事件(onchange)有效吗？

Question

失去焦点事件(onblur)无效，但更改事件(onchange)有效吗？

javascripthtmlformsvalidation

3

我有点不明白。我的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>

- alilland

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rahul Desai · Answer 1

你的代码中有一个拼写错误：应该是 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>

- ianaya89 · Answer 2

你的代码中有一个拼写错误，只需将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>

同时请注意，在您的DOM元素中使用addEventListener函数来处理事件是更好的实践：

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

请查看此链接以获取更多信息。