如何检测用户是否离开了输入字段？

Question

假设我有一个输入字段，

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

我想检测用户何时离开此字段。 我怎么能这样做？

Answer 1

普通javascript

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

jQuery

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

---

如果您在任何情况下使用预定义文本实现这些自清空字段，请使用placeholder属性。 如果您要根据焦点更改样式，请使用:focus CSS 选择器。 此外，如果用户离开该字段并更改其内容，则会发出change事件。

Answer 2

当元素失去焦点时，会触发onblur事件。

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