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

【问题标题】：How to call function when I press tab key in javascript?在javascript中按tab键时如何调用函数？
【发布时间】：2016-05-02 18:01:23
【问题描述】：

我有这样的功能：

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

【问题讨论】：

Capturing TAB key in text box的可能重复

标签： javascript enter onblur

【解决方案1】：

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

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

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

【讨论】：

如何放置代码？我已经尝试了代码，但是当我在字段为空时按 Tab 键时没有任何变化。
在这种特殊情况下，您可以保持 whenEmpty 函数不变，并执行以下步骤。使用类名获取所有输入。在这里，我给输入类'required-input'并得到了它们： var inputs= document.getElementsByClassName('required-input');然后循环遍历它们，为它们添加一个 eventListener，如果按下 Tab 键，它只会进入 whenEmpty 方法。 for (var i= 0; i
我必须将我的参数保存在 whenEmpty 函数中吗？
我建议使用 addEventListener 附加所有事件，包括当前在元素上的 onblur 和 onfocus。但是，如果这样做，whenEmpty 中的参数将不是 html 元素，而是一个事件对象，要访问 html，您需要询问该事件对象的目标属性。
让我们continue this discussion in chat.

【解决方案2】：

你可以在 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);

【讨论】：