How to detect if user has left the input field?

Question

Suppose I have an input field,

<input id="city" placeholder="city">

and I want to detect whenever user leaves this field. How can I do so?

Answer 1

Normal javascript

var element = document.getElementById("ELEMENT_ID");
element.addEventListener("blur", function() { ... your code here ...});

jQuery

$("#ELEMENT_ID").on("blur",  function() { ... your code here ...});

---

If, by any chance, you're implementing those self-emptying fields with predefined text, use placeholder attribute . If you're changing style based on focus, use:focus CSS selector . Also, change event is emitted if user leaves the field and changed it's contents.

Answer 2

When an element loses focus, the onblur event is fired.

var elem = document.getElementById('city');
elem.addEventListener("blur", function( event ) {
    console.log('Elvis has left the city (input)!');
}, true);

https://developer.mozilla.org/en-US/docs/Web/Events/blur