在javascript中按tab键时如何调用函数？

Question

我有一个这样的功能：

function whenEmpty(field) {
  if (field.value == '') {
     field.style.backgroundColor = "#ffcccc";
     alert("Please fill the field.");
     field.focus();
  } else {
     field.style.backgroundColor = "#ffff80";
  }
}

在我考虑这个想法之前（我想在按下 tab 键时调用这个函数。）我在属性 onblur 上调用这个函数。

<tr>
  <td>
    <div class="required">
      <label>Phone</label>
    </div>
  </td>
  <td>
    <form:input path="connote.destPhone" id="destPhone" htmlEscape="true" onfocus="this.select();" onmouseup="return false;" onblur="whenEmpty(this);" style="background-color:#ffff80" size="20" maxlength="50" tabindex="9" />
    <form:errors path="connote.destPhone" cssClass="error" />
  </td>
</tr>

但是现在我只想在按 Tab 键时调用该函数。

Answer 1

您可以像这样向文档添加事件侦听器。

document.addEventListener('keyup', function(event) {
  if (event.keyCode == 9) {
     whenEmpty();
  }
});

这将侦听任何 keyup（释放键盘按钮）事件，然后在 if 检查按下按钮的键码是什么。9 是 Tab 的键码。如果要将字段传递给函数，还可以将事件侦听器添加到输入本身。然后使用 event.target 访问它