sự kiện 'đầu vào' của jQuery

Tôi chưa bao giờ nghe về một sự kiện trong jQuery được gọi inputcho đến khi tôi thấy jsfiddle này .

Bạn có biết tại sao nó hoạt động? Nó là một bí danh cho keyuphay cái gì đó?

$(document).on('input', 'input:text', function() {});

Xảy ra khi nội dung văn bản của một yếu tố được thay đổi thông qua giao diện người dùng.

Đây không hẳn là bí danh keyupvì keyupsẽ kích hoạt ngay cả khi phím không làm gì (ví dụ: nhấn và sau đó nhả phím Control sẽ kích hoạt keyupsự kiện).

Một cách tốt để suy nghĩ về nó là như thế này: đó là một sự kiện kích hoạt bất cứ khi nào đầu vào thay đổi. Điều này bao gồm - nhưng không giới hạn ở - nhấn các phím sửa đổi đầu vào (ví dụ, Ctrlbản thân nó sẽ không kích hoạt sự kiện, nhưng Ctrl-Vđể dán một số văn bản sẽ), chọn tùy chọn tự động hoàn thành, ở giữa kiểu Linux -nhấp dán, kéo và thả, và nhiều thứ khác.

Xem này trang và các ý kiến về câu trả lời này để biết thêm chi tiết.

oninput sự kiện này rất hữu ích để theo dõi các thay đổi của trường đầu vào.

Tuy nhiên, nó không được hỗ trợ trong phiên bản IE <9. Nhưng các phiên bản IE cũ hơn có sự kiện độc quyền riêng onpropertychangegiống như vậy oninput.

Vì vậy, bạn có thể sử dụng nó theo cách này:

$(':input').on('input propertychange');

Để có một hỗ trợ crossbrowser đầy đủ.

Vì trao đổi thuộc tính có thể được kích hoạt cho BẤT K change thay đổi thuộc tính nào, ví dụ, thuộc tính bị vô hiệu hóa được thay đổi, nên bạn muốn thực hiện bao gồm:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Sử dụng jQuery, các hiệu ứng sau giống hệt nhau:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

inputTuy nhiên, với sự kiện này, chỉ có mẫu thứ hai dường như hoạt động trong các trình duyệt tôi đã thử nghiệm.

Do đó, bạn mong muốn nó hoạt động, nhưng nó KHÔNG (ít nhất là hiện tại):

$(':text').input(function(){ doSomething(); });

Một lần nữa, nếu bạn muốn tận dụng ủy quyền sự kiện (ví dụ: để thiết lập sự kiện vào #containertrước khi bạn input.textđược thêm vào DOM), điều này sẽ xuất hiện trong tâm trí:

$('#container').on('input', ':text', function(){ doSomething(); });

Đáng buồn thay, một lần nữa, nó hiện không hoạt động!

Chỉ mẫu này hoạt động:

$(':text').on('input', function(){ doSomething(); });

EDITED VỚI THÔNG TIN HIỆN TẠI

Tôi chắc chắn có thể xác nhận rằng mô hình này:

$('#container').on('input', ':text', function(){ doSomething(); });

NGAY BÂY GIỜ cũng hoạt động, trong tất cả các trình duyệt 'tiêu chuẩn'.

Như Stewustrofob đã nói, oninput được hỗ trợ cho IE9 +.

Tuy nhiên , "Sự kiện oninput bị lỗi trong Internet Explorer 9. Nó không được kích hoạt khi các ký tự bị xóa khỏi trường văn bản thông qua giao diện người dùng chỉ khi các ký tự được chèn. Mặc dù sự kiện onpropertychange được hỗ trợ trong Internet Explorer 9, nhưng tương tự như sự kiện oninput, nó cũng có lỗi, nó không bị xóa khi xóa.

Vì các ký tự có thể bị xóa theo nhiều cách (Backspace và Xóa các phím, lệnh CTRL + X, Cut và Delete trong menu ngữ cảnh), không có giải pháp tốt nào để phát hiện tất cả các thay đổi. Nếu các ký tự bị xóa bởi lệnh Xóa của menu ngữ cảnh, sửa đổi có thể được phát hiện trong JavaScript trong Internet Explorer 9. "

Tôi có kết quả tốt khi liên kết với cả đầu vào và keyup (và keydown, nếu bạn muốn nó chạy trong IE trong khi giữ phím Backspace).

Hãy cẩn thận trong khi sử dụng INPUT. Sự kiện này kích hoạt tiêu điểm và mờ trong IE 11. Nhưng nó được kích hoạt khi thay đổi trong các trình duyệt khác.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-f Focus

Tôi nghĩ rằng 'đầu vào' chỉ đơn giản hoạt động ở đây giống như cách 'oninput' trong Mô hình sự kiện cấp độ DOM.

Ngẫu nhiên:

Giống như Silkfire đã nhận xét nó, tôi cũng đã googled cho 'sự kiện đầu vào jQuery'. Do đó, tôi đã được dẫn đến đây và kinh ngạc khi biết rằng 'đầu vào' là một tham số có thể chấp nhận được đối với lệnh bind () của jquery . Trong jQuery in Action (trang 102, 2008 ed.) 'Input' không được đề cập đến như một sự kiện có thể xảy ra (đối với 20 người khác, từ 'mờ' đến 'unload'). Đúng là trên p. 92, điều ngược lại có thể được phỏng đoán từ việc đọc lại (nghĩa là từ một tham chiếu đến các mã định danh chuỗi khác nhau giữa các mô hình Cấp 0 và Cấp 2). Điều đó khá sai lệch.

jQuery có chữ ký sau cho .on()phương thức:.on( events [, selector ] [, data ], handler )

Sự kiện có thể là bất cứ ai trong số những người được liệt kê trong tài liệu tham khảo này:

https://developer.mozilla.org/en-US/docs/Web/Events

Mặc dù vậy, chúng không phải là tất cả các trình duyệt được hỗ trợ.

Mozilla tuyên bố như sau về sự kiện đầu vào:

Sự kiện đầu vào DOM được kích hoạt đồng bộ khi giá trị của một hoặc phần tử được thay đổi. Ngoài ra, nó kích hoạt các trình soạn thảo có thể chỉnh sửa nội dung khi nội dung của nó được thay đổi.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

làm việc trong cả IE và chrome