sự kiện onblur

Sự kiện DOM FocusEvent

Định nghĩa và cách sử dụng

sự kiện onblur xảy ra khi đối tượng mất焦点.

sự kiện onblur thường được sử dụng cùng với mã kiểm tra biểu mẫu (ví dụ, khi người dùng rời khỏi trường biểu mẫu).

Lưu ý: sự kiện onblur tương tự như Sự kiện onfocusngược lại.

Lưu ý: sự kiện onblur tương tự như Sự kiện onfocusout。Khác biệt chính là sự kiện onblur không bề bì. Do đó, nếu bạn muốn kiểm tra xem phần tử hoặc các phần tử con có mất焦点 hay không, bạn có thể sử dụng sự kiện onfocusout. Tuy nhiên, bạn có thể sử dụng sự kiện onblur của phương thức addEventListener()tham số useCapture (tùy chọn) để thực hiện điều này.

ví dụ

Chạy JavaScript khi người dùng rời khỏi trường nhập:

<input type="text" onblur="myFunction()">

Thử nghiệm trực tiếp

Có nhiều ví dụ TIY thêm ở cuối trang.

Cú pháp

Trong HTML:

<element onblur="myScript">

Thử nghiệm trực tiếp

Trong JavaScript:

object.onblur = function(){}myScript};

Thử nghiệm trực tiếp

Trong JavaScript, sử dụng phương thức addEventListener():

object.addEventListener("blur", myScript);

Thử nghiệm trực tiếp

ghi chú:Internet Explorer 8 hoặc sớm hơn không hỗ trợ phương thức addEventListener().

chi tiết kỹ thuật

bubbling: không hỗ trợ
thuộc tính có thể hủy bỏ: không hỗ trợ
kiểu sự kiện: FocusEvent
thẻ HTML được hỗ trợ: tất cả các phần tử HTML, trừ：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> và <title>
Phiên bản DOM: Level 2 Events

hỗ trợ trình duyệt

sự kiện Chrome IE Firefox Safari Opera
onblur hỗ trợ hỗ trợ hỗ trợ hỗ trợ hỗ trợ

ví dụ thêm

ví dụ

sử dụng cùng lúc sự kiện "onblur" và "onfocus":

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Thử nghiệm trực tiếp

ví dụ

事件委托：đặt tham số useCapture của addEventListener() là true:

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Thử nghiệm trực tiếp

ví dụ

事件委托：sử dụng sự kiện focusin (Firefox không hỗ trợ):

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Thử nghiệm trực tiếp

Sự kiện DOM FocusEvent