Question

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

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

现在，我已将电子邮件验证功能设置为onChange属性。因此，当用户在电子邮件字段中输入字符时，整个时间都会显示错误消息。

我想更改它，以便this.validateEmail仅在用户离开特定输入字段时被调用一次。我怎么做到这一点？

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

仅供参考，使用ReactJS

Answer 1

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

示例：

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

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

Answer 2

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

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

Answer 3

如果您想使用jQuery，那么

jQuery .focusout（handler）方法就足够了。当传递参数时，此方法是 .on（“ focusout”，handler）的快捷方式，当不传递参数时，是 .trigger（“ focusout”）的快捷方式。这里的 handler 是每次事件触发时执行的函数。例如

$("input[name="input_email"]").focusout(function(){
    alert("I left the field");
});

OR

$("#input_email").focusout(function(){
    alert("I left the field");
});

.focusout（）与 .blur（）之间的区别：

focusout 事件会在元素或其中的任何元素失去焦点时发送到该元素。这与 blur 事件不同，它支持检测对后代元素失去关注（换句话说，它支持事件冒泡）。

Answer 4

如果您只想使用 JavaScript：

document.getElementById("id").addEventListener("blur", function() {
  alert("Hello World")
});

离开输入字段后调用函数

4 个答案: