ตรวจจับการเปลี่ยนแปลงทั้งหมดใน <input type =“ text”> (ทันที) โดยใช้ JQuery

มีหลายวิธีที่มูลค่าของ<input type="text">กระป๋องสามารถเปลี่ยนแปลงได้ ได้แก่ :

• keypresses
• คัดลอกวาง
• แก้ไขด้วย JavaScript
• เติมอัตโนมัติโดยเบราว์เซอร์หรือแถบเครื่องมือ

ฉันต้องการให้เรียกใช้ฟังก์ชัน JavaScript (พร้อมค่าอินพุตปัจจุบัน) ทุกครั้งที่มีการเปลี่ยนแปลง และฉันต้องการให้มันถูกเรียกได้ทันทีไม่ใช่แค่เมื่ออินพุตขาดโฟกัส

ฉันกำลังมองหาวิธีที่สะอาดและแข็งแกร่งที่สุดในการทำเช่นนี้กับทุกเบราว์เซอร์ (โดยใช้ jQuery)

รหัส jQuery นี้จับการเปลี่ยนแปลงองค์ประกอบใด ๆ ได้ทันทีและควรทำงานกับเบราว์เซอร์ทั้งหมด:

 $('.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
       ....
     }
   });
 });

โซลูชันแฟนซีแบบเรียลไทม์สำหรับ jQuery> = 1.9

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

หากคุณต้องการตรวจจับเหตุการณ์ "คลิก" เพียง:

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

ถ้าคุณกำลังใช้ jQuery <= 1.4 เพียงแค่ใช้แทนliveon

น่าเสียดายที่ฉันคิดว่าsetIntervalชนะรางวัล:

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

มันเป็นทางออกที่สะอาดที่สุดโดยใช้โค้ดเพียง 1 บรรทัด นอกจากนี้ยังแข็งแกร่งที่สุดเนื่องจากคุณไม่ต้องกังวลเกี่ยวกับเหตุการณ์ / วิธีที่แตกต่างและinputจะได้รับคุณค่า

ข้อเสียของการใช้ 'setInterval' ดูเหมือนจะไม่ใช้ในกรณีนี้:

• ความล่าช้า 100ms สำหรับแอปพลิเคชั่นจำนวนมาก 100ms นั้นเร็วพอ
• เพิ่มโหลดบนเบราว์เซอร์หรือไม่ โดยทั่วไปการเพิ่มชุดน้ำหนักจำนวนมากช่วงเวลาในหน้าของคุณไม่ดี แต่ในกรณีนี้การโหลดหน้าเพิ่มไม่สามารถตรวจจับได้
• มันไม่ขยายไปสู่อินพุตจำนวนมาก? หน้าส่วนใหญ่ไม่มีการป้อนข้อมูลมากกว่าหนึ่งหยิบซึ่งคุณสามารถสูดดมทั้งหมดใน setInterval เดียวกัน

การเชื่อมโยงกับoninputเหตุการณ์ดูเหมือนว่าจะทำงานได้ดีในเบราว์เซอร์ที่มีสติส่วนใหญ่ IE9 ก็รองรับเช่นกัน แต่การใช้งานนั้นก็บั๊กกี้ (เหตุการณ์ไม่ได้เกิดขึ้นเมื่อลบตัวอักษร)

ด้วย jQuery เวอร์ชัน 1.7+ onวิธีการนี้มีประโยชน์ในการผูกเข้ากับเหตุการณ์เช่นนี้:

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

2017 คำตอบ : กิจกรรมป้อนข้อมูลทำสิ่งนี้ทุกอย่างที่ใหม่กว่า IE8

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

น่าเสียดายที่ไม่มีกิจกรรมหรือชุดกิจกรรมที่ตรงกับเกณฑ์ของคุณ สามารถจัดการทั้งสองคีย์คีย์และคัดลอก / วางกับkeyupเหตุการณ์ การเปลี่ยนแปลงผ่าน JS นั้นยากกว่า หากคุณสามารถควบคุมรหัสที่ตั้งค่าช่องข้อความวิธีที่ดีที่สุดของคุณคือการแก้ไขเพื่อเรียกใช้ฟังก์ชั่นของคุณโดยตรงหรือทริกเกอร์เหตุการณ์ผู้ใช้บนกล่องข้อความ:

// 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');
});

หากคุณไม่สามารถควบคุมรหัสนั้นได้คุณสามารถใช้setInterval()'ดู' ช่องข้อความสำหรับการเปลี่ยนแปลง:

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

การตรวจสอบแบบแอคทีฟประเภทนี้จะไม่ตรวจจับการอัพเดททันที แต่ดูเหมือนว่าจะเร็วพอที่จะไม่มีการล่าช้า ในฐานะที่เป็น DrLouie ชี้ให้เห็นในความคิดเห็นวิธีการแก้ปัญหานี้อาจไม่ดีถ้าคุณต้องดูปัจจัยการผลิตจำนวนมาก คุณสามารถปรับพารามิเตอร์ที่ 2 setInterval()เป็นตรวจสอบบ่อยขึ้นหรือน้อยลง

นี่เป็นวิธีแก้ปัญหาที่แตกต่างกันเล็กน้อยถ้าคุณไม่นึกคำตอบอื่น ๆ :

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);

พิจารณาว่าคุณไม่สามารถพึ่งพาคลิกและปุ่มกดเพื่อจับภาพการวางเมนูบริบท

เพิ่มรหัสนี้ที่ไหนสักแห่งนี้จะทำเคล็ดลับ

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;
};

พบโซลูชันนี้ที่val () ไม่เรียกการเปลี่ยนแปลง () ใน jQuery

ฉันได้สร้างตัวอย่าง ขอให้มันใช้ได้ผลสำหรับคุณ

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/

จริงๆแล้วเราไม่จำเป็นต้องตั้งค่าลูปสำหรับตรวจจับการเปลี่ยนแปลงของจาวาสคริปต์ เราได้ตั้งค่าตัวรับเหตุการณ์หลายเหตุการณ์ให้กับองค์ประกอบที่เราต้องการตรวจจับแล้ว เพียงแค่เรียกเหตุการณ์ที่ไม่เป็นอันตรายใด ๆ ที่จะทำให้งาน

$("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");

และ ofc นี้จะใช้ได้เฉพาะในกรณีที่คุณมีการควบคุมเต็มรูปแบบในการเปลี่ยนแปลงจาวาสคริปต์ในโครงการของคุณ

วิธีที่ดีที่สุดคือการครอบคลุมฐานทั้งสามที่คุณระบุด้วยตัวเอง ง่าย ๆ : onblur,: onkeyup ฯลฯ จะไม่ทำงานในสิ่งที่คุณต้องการดังนั้นเพียงแค่รวมเข้าด้วยกัน

KeyUp ควรครอบคลุมสองรายการแรกและหาก Javascript กำลังแก้ไขช่องป้อนข้อมูลฉันแน่ใจว่าหวังว่าจะเป็นจาวาสคริปต์ของคุณเองดังนั้นเพียงเพิ่มการโทรกลับในฟังก์ชันที่ปรับเปลี่ยน

นี่คือตัวอย่างการทำงานที่ฉันใช้ในการใช้การเปลี่ยนแปลงอัตโนมัติเติมข้อมูลให้กับตัวเลือก jqueryui (รายการ) แต่ฉันไม่ต้องการให้มันทำงานเหมือนกับการเติมข้อความอัตโนมัติ jqueryui ซึ่งทำเมนูแบบเลื่อนลง

$("#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>");
            }
        }); 
});

ไม่มี JQUERY! (มันล้าสมัยไปแล้วทุกวันนี้)

แก้ไข: ฉันลบกิจกรรม HTML อย่าใช้เหตุการณ์ HTML ... แทนที่จะใช้ Javascript Event Listeners

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>

คุณไม่สามารถใช้<span contenteditable="true" spellcheck="false">องค์ประกอบแทนได้<input type="text">หรือ

<span>(โดยมีcontenteditable="true" spellcheck="false"คุณลักษณะ) แตกต่างโดย<input>ส่วนใหญ่เป็นเพราะ:

• <input>มันไม่ได้เป็นสไตล์เช่น
• มันไม่มีvalueคุณสมบัติ แต่มีการสร้างข้อความinnerTextและทำให้เป็นส่วนหนึ่งของเนื้อความภายใน
• มันหลายในขณะที่ไม่ได้แม้ว่าคุณตั้งค่าแอตทริบิวต์<input>multiline="true"

เพื่อให้บรรลุลักษณะที่ปรากฏคุณสามารถจัดรูปแบบใน CSS ในขณะที่เขียนค่าตามที่innerTextคุณสามารถรับมันได้จากเหตุการณ์:

นี่คือไวโอลิน

น่าเสียดายที่มีบางอย่างที่ใช้งานไม่ได้กับ IE และ Edge ซึ่งฉันหาไม่เจอ

แม้ว่าคำถามนี้ถูกโพสต์เมื่อ 10 ปีที่แล้ว แต่ฉันเชื่อว่ามันยังต้องการการปรับปรุงบางอย่าง นี่คือทางออกของฉัน

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

$('selector').val('some value')ปัญหาเฉพาะกับการแก้ปัญหานี้คือมันจะไม่เรียกว่าค่าการเปลี่ยนแปลงจากจาวาสคริปต์เช่น คุณสามารถดำเนินการเหตุการณ์ใด ๆ ให้กับตัวเลือกของคุณเมื่อคุณเปลี่ยนค่าจากจาวาสคริปต์

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

คุณสามารถดูตัวอย่างนี้และเลือกเหตุการณ์ที่คุณสนใจ:

<!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>

ฉันอาจมาสายไปงานปาร์ตี้ที่นี่ แต่คุณสามารถใช้เหตุการณ์. change () ที่ jQuery จัดไว้ให้ได้หรือไม่

คุณควรจะทำอะไรเช่น ...

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

คุณสามารถผูกมันไว้ในรายการตัวควบคุมด้วยสิ่งต่าง ๆ เช่น ...

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

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

เครื่องผูกสดช่วยให้แน่ใจว่ามีการจัดการองค์ประกอบทั้งหมดที่มีอยู่ในหน้านี้และในอนาคต

นี่เป็นวิธีที่เร็วและสะอาดในการทำเช่นนั้น:

ฉันกำลังใช้ Jquery ->

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

มันใช้งานได้ดีสำหรับฉัน