如何檢測用戶是否離開了輸入字段？

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