Phát hiện thay đổi đầu vào trong jQuery?

Khi sử dụng jquery .changetrên một inputsự kiện sẽ chỉ được kích hoạt khi đầu vào mất tiêu điểm

Trong trường hợp của tôi, tôi cần thực hiện cuộc gọi đến dịch vụ (kiểm tra xem giá trị có hợp lệ không) ngay khi giá trị đầu vào được thay đổi. Làm thế nào tôi có thể thực hiện điều này?

CẬP NHẬT để làm rõ và ví dụ

ví dụ: http://jsfiddle.net/pxfunc/5kpeJ/

Phương pháp 1. inputsự kiện

Trong các trình duyệt hiện đại sử dụng inputsự kiện này. Sự kiện này sẽ kích hoạt khi người dùng đang gõ vào trường văn bản, dán, hoàn tác, về cơ bản bất cứ lúc nào giá trị thay đổi từ giá trị này sang giá trị khác.

Trong jQuery làm điều đó như thế này

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

bắt đầu với jQuery 1.7, thay thế bindbằng on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Phương pháp 2. keyupsự kiện

Đối với các trình duyệt cũ hơn, hãy sử dụng keyupsự kiện này (sự kiện này sẽ kích hoạt khi một phím trên bàn phím được phát hành, sự kiện này có thể mang lại một loại dương tính giả vì khi "w" được giải phóng, giá trị đầu vào bị thay đổi và cả khi keyupsự kiện kích hoạt Phím "shift" được giải phóng các keyupsự kiện kích hoạt nhưng không có thay đổi nào được thực hiện đối với đầu vào.). Ngoài ra phương pháp này không kích hoạt nếu người dùng nhấp chuột phải và dán từ menu ngữ cảnh:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Phương pháp 3. Hẹn giờ ( setIntervalhoặc setTimeout)

Để giải quyết các giới hạn của keyupbạn, bạn có thể đặt bộ hẹn giờ để kiểm tra định kỳ giá trị của đầu vào để xác định thay đổi giá trị. Bạn có thể sử dụng setIntervalhoặc setTimeoutđể làm kiểm tra hẹn giờ này. Xem câu trả lời được đánh dấu cho câu hỏi SO này: sự kiện thay đổi hộp văn bản jQuery hoặc xem fiddle cho một ví dụ hoạt động bằng cách sử dụng focusvà blurcác sự kiện để bắt đầu và dừng bộ hẹn giờ cho một trường đầu vào cụ thể

Nếu bạn đã có HTML5:

• oninput (chỉ kích hoạt khi thay đổi thực sự xảy ra, nhưng thực hiện ngay lập tức)

Mặt khác, bạn cần kiểm tra tất cả các sự kiện này có thể cho thấy sự thay đổi đối với giá trị của phần tử đầu vào:

• onchange
• onkeyup( không keydown hoặc keypressvì giá trị của đầu vào sẽ không có tổ hợp phím mới trong đó)
• onpaste (khi được hỗ trợ)

và có thể:

• onmouseup (Tôi không chắc chắn về điều này)

Với HTML5 và không sử dụng jQuery, bạn có thể sử dụng inputsự kiện :

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

Điều này sẽ kích hoạt mỗi khi văn bản của đầu vào thay đổi.

Được hỗ trợ trong IE9 + và các trình duyệt khác.

Hãy thử nó sống trong một jsFiddle ở đây .

Như những người khác đã đề xuất, giải pháp trong trường hợp của bạn là đánh hơi nhiều sự kiện .
Các plugin làm công việc này thường lắng nghe các sự kiện sau:

$ input.on ('thay đổi phím nhấn phím nhấn phím mousedown bấm mouseup', handler);. bật ( 'thay đổi phím nhấn phím nhấn phím mousedown bấm chuột' , trình xử lý );

Nếu bạn nghĩ rằng nó có thể phù hợp, bạn có thể thêm focus, blurvà các sự kiện khác nữa.
Tôi đề nghị không vượt quá trong các sự kiện để lắng nghe, vì nó tải trong bộ nhớ trình duyệt các thủ tục tiếp theo để thực thi theo hành vi của người dùng.

Chú ý: lưu ý rằng việc thay đổi giá trị của một phần tử đầu vào bằng JavaScript (ví dụ: thông qua .val()phương thức jQuery ) sẽ không kích hoạt bất kỳ sự kiện nào ở trên.
(Tham khảo: https://api.jquery.com/change/ ).

Nếu bạn muốn sự kiện được kích hoạt bất cứ khi nào có gì đó thay đổi trong thành phần thì bạn có thể sử dụng sự kiện keyup .

// .blur được kích hoạt khi phần tử mất tiêu điểm

$('#target').blur(function() {
  alert($(this).val());
});

// Để kích hoạt sử dụng thủ công:

$('#target').blur();

Có các sự kiện jQuery như keyup và keypress mà bạn có thể sử dụng với các phần tử HTML đầu vào. Bạn cũng có thể sử dụng sự kiện Blur () .

Điều này bao gồm mọi thay đổi đối với đầu vào bằng jQuery 1.7 trở lên:

$(".inputElement").on("input", null, null, callbackFunction);