เหตุการณ์ 'อินพุต' jQuery

ฉันไม่เคยได้ยินเหตุการณ์ใน jQuery เรียกinputจนกระทั่งฉันเห็นjsfiddleนี้

คุณรู้ไหมว่าทำไมมันถึงทำงาน มันเป็นนามแฝงสำหรับkeyupหรือบางสิ่งบางอย่าง?

$(document).on('input', 'input:text', function() {});

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

ไม่ใช่นามแฝงkeyupเพราะkeyupจะยิงแม้ว่ากุญแจจะไม่ทำอะไรเลย (ตัวอย่างเช่น: การกดแล้วปล่อยปุ่มควบคุมจะทำให้เกิดkeyupเหตุการณ์)

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

ดูหน้านี้และความคิดเห็นเกี่ยวกับคำตอบนี้สำหรับรายละเอียดเพิ่มเติม

oninput เหตุการณ์มีประโยชน์มากในการติดตามการเปลี่ยนแปลงของฟิลด์อินพุต

แต่มันก็ไม่ได้รับการสนับสนุนใน IE เวอร์ชัน <9 แต่รุ่นเก่า IE มีเหตุการณ์ที่เป็นกรรมสิทธิ์ของตัวเองที่ไม่เหมือนกันกับonpropertychangeoninput

ดังนั้นคุณสามารถใช้วิธีนี้:

$(':input').on('input propertychange');

เพื่อรับการสนับสนุน crossbrowser อย่างเต็มรูปแบบ

เนื่องจากการเปลี่ยนแปลงคุณสมบัติสามารถถูกเรียกใช้สำหรับการเปลี่ยนแปลงคุณสมบัติใด ๆ ตัวอย่างเช่นคุณสมบัติที่ปิดใช้งานมีการเปลี่ยนแปลงดังนั้นคุณจึงต้องการรวมสิ่งนี้:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

การใช้ jQuery ต่อไปนี้เหมือนกันในลักษณะพิเศษ:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

อย่างไรก็ตามด้วยinputเหตุการณ์รูปแบบที่สองเท่านั้นที่ดูเหมือนว่าจะทำงานในเบราว์เซอร์ที่ฉันได้ทดสอบ

ดังนั้นคุณคาดหวังว่าสิ่งนี้จะได้ผล แต่ก็ไม่ได้ (อย่างน้อยปัจจุบัน):

$(':text').input(function(){ doSomething(); });

อีกครั้งหากคุณต้องการยกระดับการมอบหมายกิจกรรม (เช่นการตั้งค่ากิจกรรม#containerก่อนที่คุณinput.textจะเพิ่มใน DOM) สิ่งนี้ควรคำนึงถึง:

$('#container').on('input', ':text', function(){ doSomething(); });

น่าเสียดายที่มันไม่สามารถใช้งานได้ในขณะนี้!

รูปแบบนี้ใช้งานได้เท่านั้น:

$(':text').on('input', function(){ doSomething(); });

แก้ไขด้วยข้อมูลปัจจุบันเพิ่มเติม

แน่นอนฉันสามารถยืนยันได้ว่ารูปแบบนี้:

$('#container').on('input', ':text', function(){ doSomething(); });

ทำงานได้แล้วในเบราว์เซอร์ 'มาตรฐาน' ทั้งหมด

ตามที่ claustrofob กล่าวว่า oninput รองรับ IE9 +

อย่างไรก็ตาม "เหตุการณ์ oninput เป็นบั๊กใน Internet Explorer 9 มันจะไม่ทำงานเมื่อลบอักขระจากฟิลด์ข้อความผ่านส่วนต่อประสานผู้ใช้เมื่อใส่อักขระเท่านั้นแม้ว่าเหตุการณ์ onpropertychange จะรองรับใน Internet Explorer 9 แต่คล้ายกับ เหตุการณ์ที่เกิดขึ้นมันก็เป็นรถก็ไม่ได้เป็นเชื้อเพลิงในการลบ

เนื่องจากสามารถลบอักขระได้หลายวิธี (ปุ่ม Backspace และ Delete, CTRL + X, คำสั่งตัดและลบในเมนูบริบท) จึงไม่มีวิธีที่ดีในการตรวจสอบการเปลี่ยนแปลงทั้งหมด หากตัวละครถูกลบโดยคำสั่งลบของเมนูบริบทจะไม่สามารถตรวจพบการดัดแปลงใน JavaScript ใน Internet Explorer 9 "

ฉันมีผลลัพธ์ที่ดีผูกพันกับทั้งอินพุตและคีย์อัพ (และคีย์ดาวน์หากคุณต้องการให้มันทำงานใน IE ในขณะที่กดปุ่ม Backspace ค้างไว้)

ระวังในขณะที่ใช้อินพุท เหตุการณ์นี้เริ่มต้นที่การโฟกัสและเบลอใน IE 11 แต่จะถูกเรียกใช้เมื่อมีการเปลี่ยนแปลงในเบราว์เซอร์อื่น

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

ฉันคิดว่า 'อินพุต' ทำงานได้ที่นี่เช่นเดียวกับ 'oninput' ในรูปแบบกิจกรรมระดับ DOM O

อนึ่ง:

เช่นเดียวกับที่ไหมแสดงความคิดเห็นฉันก็ googled สำหรับ 'jQuery input event' ดังนั้นฉันจึงถูกพาไปที่นี่และประหลาดใจที่ได้ทราบว่า 'อินพุต' เป็นพารามิเตอร์ที่ยอมรับได้สำหรับคำสั่งbind ()ของ jquery ในjQuery in Action (หน้า 102, 2008 ed.) 'อินพุต' ไม่ได้ถูกกล่าวถึงว่าเป็นเหตุการณ์ที่เป็นไปได้ (เทียบกับ 20 รายการจาก 'เบลอ' ถึง 'ยกเลิกการโหลด') มันเป็นความจริงว่าบนหน้า 92 อาจตรงกันข้ามจากการอ่านซ้ำ (เช่นจากการอ้างอิงถึงตัวระบุสตริงที่แตกต่างกันระหว่างโมเดลระดับ 0 และระดับ 2) นั่นค่อนข้างทำให้เข้าใจผิด

jQuery มีลายเซ็นต่อไปนี้สำหรับ.on()วิธีการ:.on( events [, selector ] [, data ], handler )

กิจกรรมอาจเป็นรายการใดรายการหนึ่งในรายการอ้างอิงนี้:

https://developer.mozilla.org/en-US/docs/Web/Events

แม้ว่ามันจะไม่ได้รับการสนับสนุนจากทุกเบราว์เซอร์

Mozilla ระบุสิ่งต่อไปนี้เกี่ยวกับเหตุการณ์อินพุต:

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

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

ทำงานได้ทั้ง IE และ chrome