离开输入字段后调用函数

Question

在联系表格上，我有几个输入字段。其中一个字段是电子邮件地址字段：

 <input type='text' name='input_email' onChange={this.validateEmail}/>

现在，我将电子邮件验证功能设置为 onChange 属性。因此，当用户在电子邮件字段中输入字符时，始终会出现一条错误消息。

我想更改此设置，以便 this.validateEmail 仅在用户离开该特定输入字段时调用一次。我将如何做到这一点？

我找不到任何可以解决此问题的默认对象事件。

仅供参考，使用 ReactJS

原文由 hammerabi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 onblur() 或 onfocusout() 。一旦您点击该文本字段，它将调用函数。

例子：

 function myFunction() {
    var x = document.getElementById("sometext");
    x.value = x.value.toUpperCase();
}

 <input type="text" id="sometext" onfocusout="myFunction()">

原文由 Aleksandar Đokić 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

注意：从 React 16 开始，onFocusIn 和 onFocusOut 已分别被 onFocus 和 onBlur 取代。因此你现在有：

 <input type='text' name='input_email' onBlur={this.validateEmail}/>

原文由 Uchechukwu Nnabugwu 发布，翻译遵循 CC BY-SA 4.0 许可协议