Llame a una función después de dejar el campo de entrada

En un formulario de contacto, tengo varios campos de entrada. Uno de esos campos, es un campo de dirección de correo electrónico:

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

En este momento, tengo la función de validación de correo electrónico establecida en el atributo onChange. Por lo tanto, mientras el usuario ingresa caracteres en el campo de correo electrónico, aparece un mensaje de error todo el tiempo.

Quiero cambiar esto, para que this.validateEmail solo se llama una vez cuando el usuario abandona ese campo de entrada específico. ¿Cómo lograría esto?

No puedo encontrar ningún evento de objeto predeterminado que resuelva este problema.

Para tu información, usando ReactJS

Puedes usar onblur() o onfocusout(). Llamará a la función una vez que haga clic fuera de ese campo de texto.

Ejemplo:

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

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

Nota: A partir de React 16, onFocusIn y onFocusOut han sido reemplazados por onFocus y onBlur respectivamente. Por lo tanto, ahora tiene:

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

Si solo quieres usar JavaScript:

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

• difuminar