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

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

本文关键字：何调用 调用 函数 javascript 中按 Tab      更新时间：2023-09-26

我有一个这样的函数：

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 键时才调用该函数。

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

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

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

您可以在

正文上添加键控监听器，也可以在表上添加侦听器（只需添加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);
相关文章：