Phát hiện tất cả các thay đổi đối với <kiểu nhập = văn bản trên mạng> (ngay lập tức) bằng JQuery

Có nhiều cách giá trị của một <input type="text">có thể thay đổi, bao gồm:

• nhấn phím
• sao chép dán
• sửa đổi bằng JavaScript
• tự động hoàn thành bởi trình duyệt hoặc thanh công cụ

Tôi muốn hàm JavaScript của mình được gọi (với giá trị đầu vào hiện tại) bất cứ khi nào nó thay đổi. Và tôi muốn nó được gọi ngay lập tức, không chỉ khi đầu vào mất tập trung.

Tôi đang tìm cách sạch nhất và mạnh mẽ nhất để làm điều này trên tất cả các trình duyệt (tốt nhất là sử dụng jQuery).

Mã jQuery này nắm bắt các thay đổi ngay lập tức đối với bất kỳ phần tử nào và sẽ hoạt động trên tất cả các trình duyệt:

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

Một giải pháp ưa thích thời gian thực cho jQuery> = 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

nếu bạn cũng muốn phát hiện sự kiện "nhấp chuột", chỉ cần:

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

nếu bạn đang sử dụng jQuery <= 1.4, chỉ cần sử dụng livethay vì on.

Thật không may, tôi nghĩ rằng setIntervalchiến thắng giải thưởng:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

Đây là giải pháp sạch nhất, chỉ có 1 dòng mã. Nó cũng mạnh mẽ nhất, vì bạn không phải lo lắng về tất cả các sự kiện / cách khác nhauinput một giá trị có thể nhận được.

Nhược điểm của việc sử dụng 'setInterval' dường như không áp dụng trong trường hợp này:

• Độ trễ 100ms? Đối với nhiều ứng dụng, 100ms là đủ nhanh.
• Đã thêm tải trên trình duyệt? Nói chung, việc thêm nhiều tập hợp nặng trên trang của bạn là không tốt. Nhưng trong trường hợp cụ thể này, tải trang được thêm vào là không thể phát hiện được.
• Nó không mở rộng ra nhiều đầu vào? Hầu hết các trang không có nhiều hơn một số đầu vào, mà bạn có thể đánh hơi tất cả trong cùng một setInterval.

Liên kết với oninput sự kiện dường như hoạt động tốt trong hầu hết các trình duyệt lành mạnh. IE9 cũng hỗ trợ nó, nhưng việc triển khai bị lỗi (sự kiện không được kích hoạt khi xóa các ký tự).

Với jQuery phiên bản 1.7+, onphương thức này rất hữu ích để liên kết với sự kiện như thế này:

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

Câu trả lời năm 2017 : sự kiện đầu vào thực hiện chính xác điều này cho bất kỳ điều gì gần đây hơn IE8.

$(el).on('input', callback)

Thật không may, không có sự kiện hoặc tập hợp các sự kiện phù hợp với tiêu chí của bạn. Nhấn phím và sao chép / dán có thể được xử lý vớikeyup sự kiện này. Thay đổi thông qua JS là khó khăn hơn. Nếu bạn có quyền kiểm soát mã đặt hộp văn bản, cách tốt nhất của bạn là sửa đổi nó để gọi trực tiếp chức năng của bạn hoặc kích hoạt sự kiện người dùng trên hộp văn bản:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

Nếu bạn không có quyền kiểm soát mã đó, bạn có thể sử dụng setInterval() để 'xem' hộp văn bản để thay đổi:

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

Kiểu giám sát hoạt động này sẽ không bắt kịp cập nhật 'ngay lập tức', nhưng dường như nó đủ nhanh để không có độ trễ có thể nhận biết được. Như DrLouie đã chỉ ra trong các bình luận, giải pháp này có thể không mở rộng tốt nếu bạn cần xem nhiều đầu vào. Bạn luôn có thể điều chỉnh tham số thứ 2 setInterval()để kiểm tra thường xuyên hơn hoặc ít hơn.

Đây là một giải pháp hơi khác nếu bạn không thích bất kỳ câu trả lời nào khác:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

Hãy xem xét rằng bạn không thể dựa vào nhấp chuột và gõ phím để chụp trình đơn ngữ cảnh.

Thêm mã này ở đâu đó, điều này sẽ thực hiện các mẹo.

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

Tìm thấy giải pháp này tại val () không kích hoạt thay đổi () trong jQuery

Tôi đã tạo ra một mẫu. Có thể nó sẽ làm việc cho bạn.

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
    clearTimeout(typingTimer);
    if ($('#tyingBox').val) {
        typingTimer = setTimeout(function () {
            $("p.content").html('Typing...');
        }, doneTypingInterval);
    }
});

$('#tyingBox').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function () {
        $("p.content").html(oldData);
    }, finaldoneTypingInterval);
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/

Chúng tôi thực sự không cần thiết lập các vòng lặp để phát hiện các thay đổi javaScript. Chúng tôi đã thiết lập nhiều trình lắng nghe sự kiện cho phần tử mà chúng tôi muốn phát hiện. chỉ cần kích hoạt bất kỳ sự kiện không có hại sẽ làm cho công việc.

$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});

$("input[name='test-element']").val("test").trigger("blur");

và ofc điều này chỉ khả dụng nếu bạn có toàn quyền kiểm soát các thay đổi javascript trong dự án của bạn.

Chà, cách tốt nhất là bao gồm ba căn cứ mà bạn tự liệt kê. Một đơn giản: onblur ,: onkeyup, v.v. sẽ không hoạt động cho những gì bạn muốn, vì vậy chỉ cần kết hợp chúng.

KeyUp sẽ bao gồm hai cái đầu tiên và nếu Javascript đang sửa đổi hộp đầu vào, tôi chắc chắn hy vọng đó là javascript của riêng bạn, vì vậy chỉ cần thêm một cuộc gọi lại trong chức năng sửa đổi nó.

Đây là một ví dụ hoạt động mà tôi đang sử dụng để thực hiện một biến thể tự động hoàn thành, chọn một bộ chọn jqueryui (danh sách), nhưng tôi không muốn nó hoạt động chính xác như tự động hoàn thành jqueryui có menu thả xuống.

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

KHÔNG CÓ YÊU CẦU! (Dù sao nó cũng lỗi thời ngày nay)

Chỉnh sửa: Tôi đã xóa các sự kiện HTML. KHÔNG sử dụng các sự kiện HTML ... thay vào đó hãy sử dụng Trình nghe sự kiện Javascript.

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
 var a = document.getElementById('output');
 var b = /^[ -~]+$/;
 if (e.target.value == '' || b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. Yes";
 } else if (!b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. No";
 }
}

Try pressing Alt+NumPad2+NumPad3 in the input, it will instantly detect a change, whether you Paste, Type, or any other means, rather than waiting for you to unselect the textbox for changes to detect.

<input id="testInput">
<br>
<a id="output">Text is Ascii?.. Yes</a>

Bạn có thể chỉ sử dụng <span contenteditable="true" spellcheck="false">yếu tố thay cho <input type="text">?

<span>(với contenteditable="true" spellcheck="false"các thuộc tính) phân biệt <input>chủ yếu bởi vì:

• Nó không được tạo kiểu như một <input>.
• Nó không có thuộc valuetính, nhưng văn bản được hiển thị như là innerTextmột phần của cơ thể bên trong của nó.
• Đó là multiline trong khi <input>không phải mặc dù bạn đặt thuộc tính multiline="true".

Tất nhiên, để hoàn thành giao diện, bạn có thể định kiểu nó bằng CSS, trong khi viết giá trị là innerText bạn có thể nhận cho nó một sự kiện:

Đây là một câu đố .

Thật không may, có một cái gì đó không thực sự hoạt động trong IE và Edge, mà tôi không thể tìm thấy.

Mặc dù câu hỏi này đã được đăng 10 năm trước, tôi tin rằng nó vẫn cần một số cải tiến. Vì vậy, đây là giải pháp của tôi.

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

Vấn đề duy nhất với giải pháp này là, nó sẽ không kích hoạt nếu giá trị thay đổi từ javascript như thế nào $('selector').val('some value'). Bạn có thể kích hoạt bất kỳ sự kiện nào cho bộ chọn của mình khi bạn thay đổi giá trị từ javascript.

$(selector).val('some value');
// fire event
$(selector).trigger('change');

bạn có thể xem ví dụ này và chọn những sự kiện mà bạn quan tâm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>evetns</title>
</head>
<body>
<form>
    <input class="controlevents" id="i1" type="text" /><br />
    <input class="controlevents" id="i2" type="text" /><br />
    <input class="controlevents" id="i3" type="text" /><br />
    <input class="controlevents" id="i4" type="text" /><br />
    <input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){

function testingevent(ev){
    if (ev.currentTarget.tagName=="INPUT")
        $("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}   

    var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
                    "beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
                    "readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
                    "mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
                    "afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
                    "mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];

    var inputs = $(".controlevents");

    $.each(eventlist, function(i, el){
        inputs.bind(el, testingevent);
    });

});
</script>

Tôi có thể đến bữa tiệc muộn ở đây nhưng bạn có thể không chỉ sử dụng sự kiện .change () mà jQuery cung cấp.

Bạn sẽ có thể làm một cái gì đó như ...

$(#CONTROLID).change(function(){
    do your stuff here ...
});

Bạn luôn có thể liên kết nó với một danh sách các điều khiển với thứ gì đó như ...

var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});

Chất kết dính trực tiếp đảm bảo rằng tất cả các yếu tố tồn tại trên trang hiện tại và trong tương lai đều được xử lý.

Đây là cách nhanh nhất và sạch nhất để làm điều đó:

Tôi đang sử dụng Jquery ->

$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});

Nó đang làm việc khá tốt cho tôi.