Home > Web > jQuery Events – Các sự kiện của Form

jQuery Events – Các sự kiện của Form

Các sự kiện của Form gồm có :

  • .focus()
  • .blur()
  • .change()
  • .select()
  • .submit()

.focus()

Mô tả : Phương thức .focus() ràng buộc một event handler cho sự kiện focus của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp : 

  • .focus(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .focus([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .focus()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘focus’,handler) trong dạng đầu tiên và thứ hai, và .trigger(‘focus’) trong dạng thứ ba.

Sự kiện focus sẽ được gửi đến 1 phần tử khi nó nhận được focus. Sự kiện này hoàn toàn có thể được áp dụng cho một tập hợp hữu hạn các phần tử, như các phần tử form (<input>, <select>,…) và thẻ link <a href>). Trong các phiên bản trình duyệt gần đây, sự kiện này có thể được mở rộng bao gồm tất cả các loại phần tử được thiết lập rõ ràng thuộc tính tabindex. Một phần tử có thể được gán focus thông qua một lệnh bàn phím như là phím Tab, hay bằng cách click chuột lên phần tử đó.

Các phần tử được focus thường được highlight theo một cách nào đó bởi trình duyệt, ví dụ với một đường kẻ chấm chấm bao quanh phần tử. Focus thường được dùng để định rõ phần tử nào sẽ là phần tử đầu tiên nhận sự kiện liên quan đến bàn phím.

Việc thiết lập focus cho một phần tử ẩn ( hidden element ) là một nguyên nhân gây lỗi đối với trình duyệt IE. Hãy cẩn thận chỉ sử dụng .focus() trên những phần tử visible.

Để chạy một sự kiện focus của một phần tử mà không phải thiết lập focus cho phần tử, hãy sử dụng .triggerHandleer(“focus”) thay cho .focus()

Ví dụ bạn có tài liệu HTML sau :

<form>
    <input id="target" type="text" value="Field 1" />
    <input type="text" value="Field 2" />
</form>
<div id="other">
    Trigger the handler
</div>

Để khi click vào trường thứ nhất hoặc dùng phím Tab focus vào nó từ một trường khác sẽ hiển thị lên thông báo, bạn có thể viết :

$('#target').focus(function() {
    alert('Handler for .focus() called.');
});

Chúng ta cũng có thể kích hoạt sự kiện focus của phần tử #target khi một phần tử khác được click bằng cách :

$('#other').click(function() {
    $('#target').focus();
});

Sự kiện focus không hoạt động trong IE. Do đó, các script phụ thuộc vào sự kiện ủy quyền của sự kiện focus sẽ không tương thích với mọi trình duyệt. Tuy nhiên từ phiên bản 1.4.2, jQuery đã hạn chế điều này bằng cách map sự kiện focus với sự kiện focusin trong các phương thức ủy quyền của nó, .live() và .delegate()

Ví dụ 1: Khi thẻ input được focus, thực hiện thêm thuộc tính css cho thẻ span kế tiếp

<!DOCTYPE html>
<html>
<head>
    <style>span {display:none;}</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p><input type="text" /> <span>focus fire</span></p>
    <p><input type="password" /> <span>focus fire</span></p>
    <script>
        $("input").focus(function () {
             $(this).next("span").css('display','inline').fadeOut(1000);
        });
    </script>
</body>

</html>

Ví dụ 2: Ngăn người dùng gõ tiếp vào input text

$("input[type=text]").focus(function(){
    $(this).blur();
});

Ví dụ 3: Focus vào input login với id ‘login’ khi trang được load

$(document).ready(function(){
    $("#login").focus();
});

.blur()

Mô tả : Phương thức .blur() ràng buộc một event handler cho sự kiện blur của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .blur(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .blur([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .blur()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘blur’,handler) trong hai dạng đầu, và .trigger(‘blur) trong dạng thứ ba.

Sự kiện blur sẽ được gửi đến 1 phần tử khi nó bị mất focus. Đầu tiên sự kiện này chỉ được chấp nhận cho các phần tử form chẳng hạn như thẻ <input>. Trong các trình duyệt gần đây, phạm vi của sự kiện được mở rộng đến tất cả các loại phần tử. Một phần tử có thể bị mất focus thông qua lệnh từ bàn phím, chẳng hạn như phím Tab, hoặc bằng cách click chuột ra một chỗ khác trên trang.

Ví dụ, xem xét tài liệu HTML sau :

<form>
    <input id="target" type="text" value="Field 1" />
    <input type="text" value="Field 2" />
</form>
<div id="other">
    Trigger the handler
</div>

Để gắn sự kiện .blur cho #target :

$('#target').blur(function() {
    alert('Handler for .blur() called.');
});

Bây giờ nếu thẻ input đầu tiên có focus thì khi người dùng click ra một nơi khác hoặc ấn phím Tab chuyển đến 1 phần tử khác thì sẽ hiện lên thông báo “Handler for .blur() called”)

Để kích hoạt sự kiện một cách tự động, bạn có thể gọi .blur() không có tham số. Đoạn code sau có tác dụng khi người dùng click vào #other thì sự kiện .blur của #target sẽ được kích hoạt.

$('#other').click(function() {
    $('#target').blur();
});

Sự kiện blur không hoạt động trong IE. Do đó, các script phụ thuộc vào sự kiện ủy quyền của sự kiện blur sẽ không tương thích với mọi trình duyệt. Tuy nhiên từ phiên bản 1.4.2, jQuery đã hạn chế điều này bằng cách map sự kiện blur với sự kiện focusout trong các phương thức ủy quyền của nó, .live() và .delegate()

Ví dụ: Kích hoạt sự kiện blur trên tất cả các đoạn văn :

$("p").blur();

.change()

Mô tả : Phương thức .change() ràng buộc một event handler cho sự kiện change của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp : 

  • .change(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .change([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .change()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘change’,handler) trong hai dạng đầu, và .trigger(‘change’) trong dạng thứ ba.

Sự kiện change sẽ được gửi đến 1 phần tử khi giá trị của nó thay đổi.Sự kiện này chỉ được chấp nhận cho các phần tử <input>, <textarea>, <select>. Đối với select boxes, checkboxes, và các radio button , sự kiện được phát ra ngay khi người dùng tạo một lựa chọn với chuột nhưng đối với các loại phần tử khác, sự kiện này được hoãn cho đến khi phần tử bị mất focus.

Ví dụ, xem xét tài liệu HTML sau :

<form>
    <input class="target" type="text" value="Field 1" />
    <select class="target">
        <option value="option1" selected="selected">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</form>
<div id="other">
    Trigger the handler
</div>

Sự kiện .change() có thể được gắn cho text input và select box như sau :

$('.target').change(function() {
    alert('Handler for .change() called.');
});

Bây giờ nếu lựa chọn thứ hai được chọn từ dropdown, câu thông báo sẽ hiện ra. Nó cũng sẽ hiện ra nếu bạn thay đổi giá trị trong ô text rồi click ra đâu đó. Nếu ô text bị mất focus mà nội dung không bị thay đổi thì sự kiện không được kích hoạt.

Để kích hoạt sự kiện bằng tay, hãy gọi .change() không có tham số.

$('#other').click(function() {
    $('.target').change();
});

Khi đoạn code này được thực thi, người dùng click vào #other sẽ hiện lên thông báo “Handler for .change() called.”. Message này sẽ hiển thị 2 lần bởi vì handler gắn sự kiện .change() cho cả hai phần tử trong form.

Từ phiên bản jQuery 1.4, sự kiện change() hoạt động trên IE, và phù hợp với nhiều trình duyệt khác.

Ví dụ 1: Gắn kết sự kiện .change() cho select box lấy giá trị text của mỗi option được chọn và viết chúng trong thẻ div. Sau đó sẽ kích hoạt sự kiện để vẽ text vào.

<!DOCTYPE html>
<html>
<head>
   <style>
      div { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <select name="sweets" multiple="multiple">
        <option>Chocolate</option>
        <option selected="selected">Candy</option>
        <option>Taffy</option>
        <option selected="selected">Caramel</option>
        <option>Fudge</option>
        <option>Cookie</option>
      </select>
      <div></div>
   <script>
        $("select").change(function () {
           var str = "";
           $("select option:selected").each(function () {
               str += $(this).text() + " ";
           });
           $("div").text(str);
        })
        .change();
    </script>
</body>
</html>

Ví dụ 2 : Kiểm tra giá trị hợp lệ khi thêm text vào tất cả các phần tử input text.

$("input[type='text']").change( function() {
    // check input ($(this).val()) for validity here
});

.select()

Mô tả : Phương thức .select() ràng buộc một event handler cho sự kiện select của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp : 

  • .select(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .select([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .select()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘select’,handler) trong hai dạng đầu, và .trigger(‘select’) trong dạng thứ ba.

Sự kiện select sẽ được gửi đến 1 phần tử khi người dụng tạo một lựa chọn text bên trong nó.Sự kiện này chỉ được chấp nhận cho các trường <input type=”text”> và <textarea> <select>.

Ví dụ, xem xét tài liệu HTML sau :

<form>
    <input id="target" type="text" value="Hello there" />
</form>
<div id="other">
    Trigger the handler
</div>

Sự kiện .select() có thể được gắn cho text input như sau :

$('#target').select(function() {
    alert('Handler for .select() called.');
});

Bây giờ bất kỳ thành phần nào của text được chọn sẽ hiện lên thông báo. Nếu chỉ đơn thuần thiết lập vị trí của điểm chèn thì sẽ không kích hoạt sự kiện.

Để kích hoạt sự kiện bằng tay, hãy gọi .select() không có tham số :

$('#other').click(function() {
    $('#target').select();
});

Khi đoạn code này được thực thi, người dùng click vào #other sẽ hiện lên thông báo “Handler for .select() called.”. Ngoài ra, hành động select mặc định trên trường text được phát ra, do đó toàn bộ nội dung text trong thẻ #target sẽ được chọn.

Chú ý : Phương thức nhận giá trị text được chọn hiện tại có thể khác nhau giữa các trình duyệt. Một số plugin jQuery cung cấp giải pháp khắc phục vấn đề này.

Ví dụ 1: Thực hiện tác vụ khi text bên trong 1 hộp input được chọn

<!DOCTYPE html>
<html>
<head>
    <style>
        p { color:blue; }
        div { color:red; }
    </style>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
     <p>
          Click and drag the mouse to select text in the inputs.
     </p>
     <input type="text" value="Some text" />
     <input type="text" value="to test on" />
     <div></div>
     <script>
         $(":input").select( function () { 
             $("div").text("Something was selected").show().fadeOut(1000); 
         });
      </script>
</body>
</html>

Ví dụ 2 : Kích hoạt sự kiện select trên tất cả các thành phần input:

$(“input”).select();

.submit()

Mô tả : Phương thức .submit() ràng buộc một event handler cho sự kiện submit của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp : 

  • .submit(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .submit([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .submit()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘submit’,handler) trong hai dạng đầu, và .trigger(‘submit’) trong dạng thứ ba.

Sự kiện submit sẽ được gửi đến 1 phần tử khi người dùng cố gắng đệ trình (submit) một form. Sự kiện này chỉ được chấp nhận cho thẻ <form> . Forms có thể được submit bằng cách click vào một thẻ  <input type=”submit”> , <input type=”image”> hay <button type=”submit”> hoặc ấn Enter khi một phần tử nào đó của form đang có focus.

Chú ý : Tùy vào trình duyệt, phím Enter có thể gây ra một hành động submit form nếu form có chính xác một trường text hoặc chỉ khi có một nút submit. Giao diện có thể không phản ứng gì với hành vi của phím này trừ khi vấn đề được kiểm soát bởi sự kiện ấn phím Enter.

Ví dụ, xem xét tài liệu HTML sau :

<form id="target" action="destination.html">
    <input type="text" value="Hello there" />
    <input type="submit" value="Go" />
</form>
<div id="other">
    Trigger the handler
</div>

Sự kiện .submit() có thể được gắn cho form như sau :

$('#target').submit(function() {
    alert('Handler for .submit() called.');
    return false;
});

Bây giờ khi form được submit sẽ hiện lên thông báo. Việc này xảy ra trước sự submit thực sự, cho nên chúng ta có thể thoát (cancel) hành động submit bằng cách gọi phương thức .preventDefault() của đối tượng event hoặc return false từ handler của chúng ta.

Chúng ta cũng có thể kích hoạt sự kiện bằng tay khi một thành phần khác được click :

$('#target').submit(function() {
    alert('Handler for .submit() called.');
    return false;
});

Khi đoạn code này được thực thi, người dùng click vào #other sẽ hiện lên thông báo “Handler for .submit() called.”. Ngoài ra, hành động submit mặc định trên trường form được phát ra, do đó form sẽ được submit.

Chú ý : Sự kiện submit của JavaScript không hoạt động trong IE. Tuy nhiên, script dựa vào sự ủy quyền của sự kiện submit sẽ hoạt động  trên các trình duyệt dựa vào jQuery từ phiên bản 1.4 bởi jQuery đã chuẩn hóa hành vi của sự kiện

Ghi chú thêm: Form và các phần tử con của nó không được đặt thuộc tính name hay id xung đột với các thuộc tính của form chẳng hạn như submit, length hay method. Xung đột tên có thể dẫn đến các lỗi khó hiểu.

Ví dụ 1 : Ngăn chặn hành động submit của form trừ khi nhập vào đúng một giá trị định trước.

<!DOCTYPE html>
<html>
<head>
    <style>
        p { margin:0; color:blue; }
        div,p { margin-left:10px; }
        span { color:red; }
     </style>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Type 'correct' to validate.</p>
    <form action="javascript:alert('success!');">
        <div>
            <input type="text" />
            <input type="submit" />
        </div>
    </form>
    <span></span>
    <script>
    $("form").submit(function() {
       if ($("input:first").val() == "correct") {
           $("span").text("Validated...").show();
           return true;
       }
       $("span").text("Not valid!").show().fadeOut(1000);
       return false;
       });
    </script>
</body>
</html>

Ở đây, form sẽ có thể được submit chỉ khi người dùng gõ chữ “correct” vào ô text.

Ví dụ 2: Ngăn chặn hành động submit của form trừ khi một biến cờ ( a flag variable) được thiết lập :

$("form").submit( function () {
    return this.some_flag_variable;
} );

Ví dụ 3 : Kích hoạt sự kiện submit cho form đầu tiên trên trang

$("form:first").submit();
Advertisements
Categories: Web
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: