กำลังตรวจจับการเปลี่ยนแปลงอินพุตใน jQuery หรือไม่

เมื่อใช้ jquery .changeกับinputเหตุการณ์จะถูกไล่ออกเมื่ออินพุตขาดโฟกัสเท่านั้น

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

อัปเดตสำหรับการชี้แจงและตัวอย่าง

ตัวอย่าง: http://jsfiddle.net/pxfunc/5kpeJ/

วิธีที่ 1. inputเหตุการณ์

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

ใน jQuery ทำเช่นนี้

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

เริ่มต้นด้วย jQuery 1.7 แทนที่bindด้วยon:

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

วิธีที่ 2. keyupเหตุการณ์

สำหรับเบราว์เซอร์รุ่นเก่าใช้keyupเหตุการณ์ (สิ่งนี้จะเริ่มขึ้นเมื่อมีการปล่อยแป้นบนแป้นพิมพ์เหตุการณ์นี้สามารถให้ผลบวกเท็จเพราะเมื่อ "w" ถูกปล่อยค่าอินพุตจะถูกเปลี่ยนและkeyupเหตุการณ์จะเกิดไฟไหม้ ปุ่ม "shift" ถูกปล่อยออกมาkeyupเหตุการณ์ไฟไหม้ แต่ไม่มีการเปลี่ยนแปลงใด ๆ กับอินพุต) นอกจากนี้วิธีการนี้จะไม่เริ่มทำงานหากผู้ใช้คลิกขวาและวางจากเมนูบริบท:

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

วิธีที่ 3 ตัวจับเวลา ( setIntervalหรือsetTimeout)

หากต้องการหลีกเลี่ยงข้อ จำกัด ของkeyupคุณสามารถตั้งเวลาให้ตรวจสอบค่าของอินพุตเป็นระยะเพื่อตรวจสอบการเปลี่ยนแปลงค่า คุณสามารถใช้setIntervalหรือsetTimeoutทำการตรวจสอบตัวจับเวลา ดูคำตอบที่ทำเครื่องหมายไว้ในคำถาม SO นี้: กล่องข้อความ jQuery เปลี่ยนเหตุการณ์หรือดูซอสำหรับตัวอย่างการใช้งานfocusและblurกิจกรรมเพื่อเริ่มและหยุดตัวจับเวลาสำหรับฟิลด์อินพุตที่ระบุ

หากคุณมี HTML5:

• oninput (ยิงเฉพาะเมื่อมีการเปลี่ยนแปลงเกิดขึ้นจริง แต่จะทำทันที)

มิฉะนั้นคุณต้องตรวจสอบเหตุการณ์ทั้งหมดเหล่านี้ซึ่งอาจบ่งบอกถึงการเปลี่ยนแปลงค่าขององค์ประกอบอินพุต:

• onchange
• onkeyup( ไม่ใช่ keydownหรือkeypressเป็นค่าของอินพุตจะไม่มีการกดแป้นพิมพ์ใหม่ในนั้น)
• onpaste (เมื่อรองรับ)

และอาจจะ:

• onmouseup (ฉันไม่แน่ใจเกี่ยวกับอันนี้)

ด้วย HTML5 และไม่ใช้ jQuery คุณสามารถใช้inputเหตุการณ์ :

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

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

สิ่งนี้จะเริ่มทำงานทุกครั้งที่มีการเปลี่ยนแปลงข้อความของอินพุต

รองรับ IE9 + และเบราว์เซอร์อื่น ๆ

ลองมันอาศัยอยู่ในjsFiddle ที่นี่

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

$ การป้อนข้อมูล บน( 'เปลี่ยนปุ่มกด keydown keyup mousedown คลิก mouseup' , จัดการ);

ถ้าคุณคิดว่ามันอาจจะพอดีคุณสามารถเพิ่มfocus, blurและกิจกรรมอื่น ๆ มากเกินไป
ฉันขอแนะนำไม่ให้เกินเหตุการณ์ที่จะฟังเพราะมันโหลดในหน่วยความจำเบราว์เซอร์ขั้นตอนเพิ่มเติมเพื่อดำเนินการตามพฤติกรรมของผู้ใช้

ข้อควรสนใจ:โปรดทราบว่าการเปลี่ยนค่าขององค์ประกอบอินพุตด้วย JavaScript (เช่นผ่าน.val()วิธีjQuery ) จะไม่เริ่มต้นเหตุการณ์ใด ๆ ข้างต้น
(การอ้างอิง: https://api.jquery.com/change/ )

หากคุณต้องการให้เหตุการณ์ถูกไล่ออกเมื่อใดก็ตามที่มีการเปลี่ยนแปลงภายในองค์ประกอบคุณสามารถใช้เหตุการณ์keyup

// .blur ถูกกระตุ้นเมื่อองค์ประกอบสูญเสียการโฟกัส

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

// หากต้องการเรียกใช้ด้วยตนเอง:

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

มีเหตุการณ์ jQuery เช่นการกดคีย์และการกดปุ่มซึ่งคุณสามารถใช้กับองค์ประกอบ HTML ได้ คุณสามารถใช้เหตุการณ์เบลอ ()เพิ่มเติมได้

สิ่งนี้ครอบคลุมการเปลี่ยนแปลงทุกอย่างของอินพุตโดยใช้ jQuery 1.7 ขึ้นไป:

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