在 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

您可以在 body 上添加一个 keyup 监听器，或者您可以在您的 table 上添加监听器（就像您添加 tabindex 属性一样）

// event listener for keyup
function checkTabPress(e) {        
    if (e.keyCode == 9) {
     //call your function whenEmpty()
    }
}

var body = document.querySelector('body');
body.addEventListener('keyup', checkTabPress);

Answer 2

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

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

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

访问它

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

How to call function when I press tab key in javascript?

javascript

enter

onblur