.blur()

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

.blur(): Kèm một hành động khi sử dụng blur, sự kiện blur là khi người dùng thoát khỏi focus trong trường nhập (input).

Cấu trúc

Đã được thêm vào từ phiên bản 1.0

$('div.test').click(function(){
    $('input').blur();
});

Đã được thêm vào từ phiên bản 1.4.3

.blur(function(){});

$('input').blur(function(){
    alert('Đã rời focus');
});

.blur();

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('.clickFocus').click(function(){
        $('#txtField').focus().css('background','#ccc');
    });
    
    $('.clickBlur').click(function(){
        $('#txtField').blur().css('background','none');
    });
});
</script>
</head>

<body>
<button class="clickFocus">Focus</button><button class="clickBlur">blur</button><br />
<input type="text" id="txtField" value="Field" />
</body>
</html>

Hiển thị trình duyệt:

Ta thấy khi click button Focus, lập tức trường nhập (input) đã được focus, có thể gõ text, nhưng khi click button Blur thì trường nhập sẽ thoát.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery - click blur
<button class="clickFocus">Focus</button><button class="clickBlur">blur</button><br /> <input type="text" id="txtField" value="Field" />	<button class="clickFocus">Focus</button><button class="clickBlur">blur</button><br /> <input type="text" id="txtField" value="Field" style="background:none;" /> </div>

.blur(function(){});

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('#txtField').blur(function(){
        $('span').text('Đã rời focus');
    });
});
</script>
</head>

<body>
<input type="text" id="txtField" value="Field" /> <span></span>
</body>
</html>

Hiển thị trình duyệt:

Click vào trường nhập input (focus) và sau đó rời khỏi nó (click chỗ khác) sẽ thấy kết quả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<input type="text" id="txtField" value="Field" /> <span></span>	<input type="text" id="txtField" value="Field" /> <span>Đã rời focus</span>

.bind()

.change()