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

您可以在正文上添加keyup侦听器，也可以在表上添加侦听器（就像添加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();
  }
});

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

访问它

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

2 个答案: