jQuery chỉ liên kết với khóa phím, không tập trung

Question

Điều này có vẻ như một điều đơn giản nhưng google chưa bật lên bất kỳ thứ gì cho tôi:

Làm cách nào để liên kết với sự kiện thay đổi văn bản/giá trị ? Tức là, với các điều sau:

$(function(){ 
    $('input#target').on('keyup', function(){ 
    alert('Typed something in the input.'); 
    }); 
}); 

... cảnh báo sẽ được kích hoạt khi người dùng vào và ra khỏi phần tử, cho dù họ có nhập văn bản hay không. Làm cách nào bạn có thể cho phép người dùng điều hướng bàn phím thông qua biểu mẫu mà không kích hoạt sự kiện trừ khi họ nhập/thay đổi văn bản trong trường văn bản?

Lưu ý: Tôi đang cho thấy một phiên bản đơn giản của một kịch bản, lý do không sử dụng sự kiện change là trong mã thực của tôi, tôi có một bộ đếm thời gian chậm trễ do đó sự kiện xảy ra sau khi người dùng ngừng gõ cho một thứ hai, không cần phải thay đổi tiêu điểm để kích hoạt sự kiện.

Answer 1

Store giá trị, và trên bất kỳ kiểm tra sự kiện quan trọng nếu nó thay đổi, như vậy:

$(function(){ 
    $('input#target').on('keyup', function(){ 
     if ($(this).data('val')!=this.value) { 
      alert('Typed something in the input.'); 
     } 
     $(this).data('val', this.value); 
    }); 
});​ 

FIDDLE

Answer 2

Chỉ cần sử dụng sự kiện .change.

Cập nhật: Nếu bạn muốn thông báo thay đổi trực tiếp thì bạn phải thực hiện sự kiện keyup, có nghĩa là bạn cần lập trình trình xử lý của bạn để bỏ qua các khóa đó.

Bạn có thể thực hiện điều này với danh sách trắng mã khóa bị bỏ qua, nhưng có thể xấu xí: nhấn Del dẫn đến giá trị bị thay đổi, trừ khi con trỏ được đặt ở cuối đầu vào trong trường hợp đó không, trừ khi có một phạm vi được lựa chọn trong đầu vào trong trường hợp đó.

Một cách khác mà cá nhân tôi thấy lành mạnh hơn nếu không phải là "thuần khiết" là lập trình trình xử lý của bạn nhớ giá trị cũ của phần tử đó và chỉ phản ứng nếu nó đã thay đổi.

$(function() { 
    // for each input element we are interested in 
    $("input").each(function() { 
     // set a property on the element to remember the old value, 
     // which is initially unknown 
     this.oldValue = null; 
    }).focus(function() { 
     // this condition is true just once, at the time we 
     // initialize oldValue to start tracking changes 
     if (this.oldValue === null) { 
      this.oldValue = this.value; 
     } 
    }).keyup(function() { 
     // if no change, nothing to do 
     if (this.oldValue == this.value) { 
      return; 
     } 

     // update the cached old value and do your stuff 
     this.oldValue = this.value; 
     alert("value changed on " + this.className); 
    }); 
});​ 

Nếu bạn không muốn thiết lập các thuộc tính trực tiếp trên phần tử DOM (thực sự, không có gì sai với nó) sau đó bạn có thể thay thế cho $(this).data("oldValue")this.oldValue bất cứ khi nào nó xuất hiện. Điều này về mặt kỹ thuật sẽ có nhược điểm làm cho mã chậm hơn, nhưng tôi không tin bất cứ ai sẽ nhận thấy.

See it in action.

Answer 3

này sẽ làm điều đó, thiết lập thuộc tính tùy chỉnh và kiểm tra chống lại rằng:

$('input').focus(function(){ 
    $(this).attr('originalvalue',$(this).val()); 
}); 

$('input').on('keyup',function(){ 
    if($(this).val()===$(this).attr('originalvalue')) return; 
    alert('he must\'ve typed something.'); 
}); 

Hãy cảnh giác với các sự kiện bắn nhiều lần.

Answer 4

Dưới đây là một phiên bản đó rõ ràng kiểm tra nếu trường đầu vào là rỗng.

Nếu đầu vào trống thì thao tác sẽ không được thực hiện.

$(function(){ 
    $(selector).on('keyup', function(){ 
     if ($(this).val()!='') { 
      alert('char was entered'); 
     } 
    }) 
});