ตัวจัดการหรือแหล่งที่มาของเหตุการณ์การเปลี่ยนแปลง Onchange JavascripT ไม่ทำงานตามที่คาดไว้ เพิ่มในเวอร์ชัน jQuery

_element"> องค์ประกอบ HTML เลือกรสชาติไอศกรีม: เลือกหนึ่งรายการ … ช็อคโกแลตซาร์ดีนวานิลลา

เนื้อความ ( display: grid; grid-template-areas: "select result"; ) เลือก ( grid-area: select; ) .result ( grid-area: result; )

JavaScript const selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => ( const result = document.querySelector(".result"); result.textContent = `คุณชอบ $(event.target.value)`; )); องค์ประกอบการป้อนข้อความผลลัพธ์

สำหรับองค์ประกอบบางอย่าง รวมถึง เหตุการณ์การเปลี่ยนแปลงจะไม่เริ่มทำงานจนกว่าการควบคุมจะสูญเสียโฟกัส ลองป้อนบางสิ่งลงในฟิลด์ด้านล่าง จากนั้นคลิกที่อื่นเพื่อทริกเกอร์เหตุการณ์

HTML JavaScript const input = document.querySelector("อินพุต"); บันทึก const = document.getElementById("log"); input.addEventListener("เปลี่ยน", updateValue); ฟังก์ชั่น updateValue(e) ( log.textContent = e.target.value; ) ข้อมูลจำเพาะของผลลัพธ์ สถานะข้อมูลจำเพาะ

มาตรฐานการใช้ชีวิต HTML คำจำกัดความของ “การเปลี่ยนแปลง” ในข้อกำหนดนั้น	มาตรฐานการครองชีพ

ความเข้ากันได้ของเบราว์เซอร์

ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมในข้อมูล โปรดตรวจสอบ https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา

อัปเดตข้อมูลความเข้ากันได้บน GitHub

เดสก์ท็อปมือถือ Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome สำหรับ Android Firefox สำหรับ Android Opera สำหรับ Android Safari บน iOS Samsung Internetเมื่อมีการเปลี่ยนแปลง

Chrome รองรับเต็มรูปแบบ ใช่	ขอบสนับสนุนเต็ม 12	รองรับ Firefox เต็มรูปแบบ ใช่	การสนับสนุน IE เต็มรูปแบบ ใช่	รองรับ Opera เต็มรูปแบบ ใช่	รองรับ Safari เต็มรูปแบบ ใช่	รองรับ WebView Android เต็มรูปแบบ ใช่	รองรับ Chrome Android เต็มรูปแบบใช่	รองรับ Firefox Android อย่างเต็มรูปแบบ ใช่	รองรับ Opera Android เต็มรูปแบบ ใช่	Safari iOS รองรับเต็มรูปแบบ ใช่	Samsung Internet Android รองรับเต็มรูปแบบ ใช่

ตำนาน สนับสนุนอย่างเต็มที่ สนับสนุนอย่างเต็มที่

เบราว์เซอร์ที่แตกต่างกันไม่เห็นด้วยเสมอไปว่าควรเริ่มเหตุการณ์การเปลี่ยนแปลงสำหรับการโต้ตอบบางประเภทหรือไม่ ตัวอย่างเช่น การนำทางด้วยแป้นพิมพ์ในองค์ประกอบจะไม่ทำให้เกิดเหตุการณ์การเปลี่ยนแปลงใน Gecko จนกว่าผู้ใช้จะกด Enter หรือเปลี่ยนโฟกัสไปจาก (ดูจุดบกพร่อง 126379) ตั้งแต่ Firefox 63 (Quantum) ลักษณะการทำงานนี้จะสอดคล้องกันระหว่างเบราว์เซอร์หลักๆ ทั้งหมด

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

Onchange จะไม่เริ่มทำงานเมื่อเนื้อหาของชื่อเปลี่ยนไป แต่จะเริ่มทำงานเมื่อชื่ออยู่นอกโฟกัสเท่านั้น

มีอะไรที่สามารถทำได้เพื่อให้กิจกรรมนี้เปลี่ยนแปลงเนื้อหาได้หรือไม่? หรืองานอื่นใดที่ฉันสามารถใช้เพื่อสิ่งนี้ได้? ฉันพบวิธีแก้ปัญหาโดยใช้ฟังก์ชัน onkeyup แต่จะไม่ทำงานเมื่อเราเลือกเนื้อหาบางส่วนจากการเพิ่มอัตโนมัติของเบราว์เซอร์

ฉันต้องการบางสิ่งที่สามารถทำงานได้เมื่อเนื้อหาของฟิลด์เปลี่ยนไป แป้นพิมพ์หรือเมาส์... มีไอเดียอะไรบ้าง

(function () ( var oldVal; $("#name").on("change textInput input", function () ( var val = this.value; if (val !== oldVal) ( oldVal = val; checkLength( วาล);

สิ่งนี้จะจับการเปลี่ยนแปลง , การกดปุ่ม, วาง , textInput , อินพุต (ถ้ามี) และอย่ายิงเกินความจำเป็น

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

บล็อกคำพูด>

เริ่มทำงานในการควบคุมเมื่อผู้ใช้เปลี่ยนค่า

บล็อกคำพูด>

คุณจะต้องใช้ onkeyup และ onclick (หรือ onmouseup) ร่วมกันหากคุณต้องการคว้าโอกาสใดๆ

นี่เป็นอีกวิธีแก้ไขปัญหาหนึ่งที่ฉันกำลังพัฒนาสำหรับปัญหาเดียวกัน อย่างไรก็ตาม ฉันใช้ช่องป้อนข้อมูลจำนวนมาก ดังนั้นฉันจึงเก็บค่าเก่าเป็นแอตทริบิวต์ที่ผู้ใช้กำหนดขององค์ประกอบเอง: "data-value" การใช้ jQuery นั้นง่ายต่อการจัดการ

$(document).delegate(".filterBox", "keyup", ( self: this ), ฟังก์ชั่น (e) ( var self = e.data.self; if (e.keyCode == 13) ( e.preventDefault( ); $(this).attr("data-value", $(this).val()); self.filterBy(this, true) ) else if (e.keyCode == 27) ( $(this) val(""); $(this).attr("data-value", ""); self.filterBy(นี่, จริง) ) else ( if ($(this).attr("data-value") ! = $(this).val()) ( $(this).attr("data-value", $(this).val()); self.filterBy(this); ) ) ));

ที่นี่ ฉันใช้ช่องป้อนข้อมูล 5-6 ช่อง มีคลาส filterBox ฉันกำลังใช้วิธี filterBy เฉพาะเมื่อค่าข้อมูลแตกต่างจากค่าของมันเอง

เกิดขึ้นทันทีหลังจากที่ค่าขององค์ประกอบมีการเปลี่ยนแปลง และเหตุการณ์ onchange เกิดขึ้นเมื่อองค์ประกอบสูญเสียโฟกัส ข้อแตกต่างอีกประการหนึ่งคือเหตุการณ์ onchange มีการรองรับเบราว์เซอร์ที่กว้างกว่าและทำงานร่วมกับองค์ประกอบต่างๆ เช่น และขยายได้มากกว่าด้วย .

รองรับเบราว์เซอร์ แอตทริบิวต์เหตุการณ์
โอเปร่า
ไอเอ็กซ์พลอเรอร์
ขอบ

เมื่อมีการเปลี่ยนแปลง	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่

ตัวอย่างการใช้ไวยากรณ์

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

เหตุการณ์การเปลี่ยนแปลง

พิมพ์ข้อความใดๆ และลบโฟกัสออกจากองค์ประกอบ:

ฟังก์ชั่น testFunction() ( var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = "คุณได้พิมพ์ข้อความต่อไปนี้: " + x; )

พิมพ์ข้อความใดๆ และลบโฟกัสออกจากองค์ประกอบ:

ตัวอย่างการส่งออกค่าของแท็ก (รายการแบบเลื่อนลง) โดยใช้แอตทริบิวต์เหตุการณ์ onchange

เหตุการณ์การเปลี่ยนแปลง

เลือกความปรารถนาจากรายการ:

ความปรารถนาที่ 1 ความปรารถนาที่ 2 ความปรารถนาที่ 3

ฟังก์ชั่น wishFunction() ( var z = document.getElementById("wishlist" ).value; document.getElementById("info" ).innerHTML = "คุณได้เลือก: " + z; )

เลือกความปรารถนาจากรายการ:

ความปรารถนาที่ 1 ความปรารถนาที่ 2 ความปรารถนาที่ 3

ลองดูตัวอย่างการเปลี่ยนแปลงการหมุน 2 มิติขององค์ประกอบโดยใช้คุณสมบัติการแปลง CSS แอตทริบิวต์เหตุการณ์ HTML onchange และฟังก์ชัน JavaScript:

การหมุนสองมิติขององค์ประกอบใน CSS #test ( width : 100px ; /* กำหนดความกว้างของบล็อก */ height : 100px ; /* กำหนดความสูงของบล็อก */ Margin : 20px ; /* กำหนดจำนวน ระยะขอบสำหรับทุกด้านขององค์ประกอบ */ border : 1px สีส้มทึบ ; /* ตั้งค่าเส้นขอบสีส้มทึบ 1px */ พื้นหลัง : สีกากี ; /* ตั้งค่าสีพื้นหลัง */ แปลง : หมุน (0deg) /* ตั้งค่าไม่มี 2D การหมุน */ -webkit-transform : หมุน(0deg) ) ; -ms-transform : หมุน(0deg) ; /* เพื่อรองรับเบราว์เซอร์เวอร์ชันก่อนหน้า */ ) ฟังก์ชัน หมุน(ค่า) ( ​​/* สร้างฟังก์ชันที่จะเปลี่ยนแปลง ค่าสไตล์ขององค์ประกอบที่มี id = test แสดงผลลัพธ์ของการเปลี่ยนแปลงในองค์ประกอบที่มี id = result และการสนับสนุนสำหรับเบราว์เซอร์เวอร์ชันก่อนหน้า */ document.getElementById("test" ).style.webkitTransform = "rotate(" + value + "deg)" ; document.getElementById("test" ).style.msTransform = "rotate( " + value + "deg)" ; /* รองรับเบราว์เซอร์เวอร์ชันก่อนหน้า */ document.getElementById("test" ) style.MozTransform = "หมุน (" + ค่า + "องศา)" ; /* รองรับเบราว์เซอร์เวอร์ชันก่อนหน้า */ document.getElementById("test" ).style.transform = "rotate(" + value + "deg)" ; document.getElementById("ผลลัพธ์" ).innerHTML = value + "deg" ; -

เลื่อนแถบเลื่อนเพื่อหมุนองค์ประกอบ:

แปลงร่าง: หมุน ( 0deg );

หมุนฉัน

ตั้งค่าตัวจัดการสำหรับการเปลี่ยนแปลงองค์ประกอบแบบฟอร์มที่ระบุหรือเริ่มเหตุการณ์นี้ วิธีการนี้มีกรณีการใช้งานสามกรณี: handler(eventObject) - ฟังก์ชั่นที่จะถูกตั้งค่าเป็นตัวจัดการ เมื่อเรียกก็จะได้รับวัตถุเหตุการณ์ .

เหตุการณ์Object
ตัวจัดการ (eventObject) - ดูด้านบน

eventData - ข้อมูลเพิ่มเติมที่ส่งไปยังตัวจัดการ โดยจะต้องแสดงด้วยออบเจ็กต์ในรูปแบบ: (fName1:value1, fName2:value2, ...)

คุณสามารถลบตัวจัดการที่ติดตั้งไว้ได้โดยใช้วิธี unbind()

ตัวเลือกทั้งสามสำหรับการใช้วิธีการนี้มีความคล้ายคลึงกับวิธีอื่น (ดูด้านบน) ดังนั้นรายละเอียดทั้งหมดของการใช้ change() สามารถพบได้ในคำอธิบายของวิธีการเหล่านี้

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

// ตั้งค่าตัวจัดการเหตุการณ์การเปลี่ยนแปลงให้กับองค์ประกอบด้วยตัวระบุ foo $("#foo" ) .change (function () ( alert ("องค์ประกอบ foo มีการเปลี่ยนแปลง" ) ; ) ) ;

// เรียกเหตุการณ์การเปลี่ยนแปลงบนองค์ประกอบ foo $("#foo" ) .change () ;

• // ติดตั้งตัวจัดการเหตุการณ์การเปลี่ยนแปลงอื่น คราวนี้สำหรับองค์ประกอบ // ด้วยคลาสบล็อก มาส่งข้อมูลเพิ่มเติมไปยังตัวจัดการ $(".block" ) .change (( a: 12 , b: "abc" ) , function (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alert (" องค์ประกอบที่มีบล็อกคลาสมีการเปลี่ยนแปลง " + " ข้อมูลต่อไปนี้ถูกส่งไปยังตัวจัดการเหตุการณ์นี้: " + externalData ) ; ) ) ; 1.0เหตุการณ์ "การเปลี่ยนแปลง" ของ JavaScript ถูกยกขึ้นหรือตรวจสอบ

  เวอร์ชันที่เพิ่ม:

  .change(ตัวจัดการ (eventObject))

  ตัวจัดการ (วัตถุเหตุการณ์)

• // ติดตั้งตัวจัดการเหตุการณ์การเปลี่ยนแปลงอื่น คราวนี้สำหรับองค์ประกอบ // ด้วยคลาสบล็อก มาส่งข้อมูลเพิ่มเติมไปยังตัวจัดการ $(".block" ) .change (( a: 12 , b: "abc" ) , function (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alert (" องค์ประกอบที่มีบล็อกคลาสมีการเปลี่ยนแปลง " + " ข้อมูลต่อไปนี้ถูกส่งไปยังตัวจัดการเหตุการณ์นี้: " + externalData ) ; ) ) ; 1.4.3ประเภท: ฟังก์ชั่น()

  ฟังก์ชันตัวจัดการเหตุการณ์

  .change(, ตัวจัดการ (eventObject))

  ข้อมูลเหตุการณ์

  เวอร์ชันที่เพิ่ม:

  .change(ตัวจัดการ (eventObject))

  ประเภท: วัตถุ

• // ติดตั้งตัวจัดการเหตุการณ์การเปลี่ยนแปลงอื่น คราวนี้สำหรับองค์ประกอบ // ด้วยคลาสบล็อก มาส่งข้อมูลเพิ่มเติมไปยังตัวจัดการ $(".block" ) .change (( a: 12 , b: "abc" ) , function (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alert (" องค์ประกอบที่มีบล็อกคลาสมีการเปลี่ยนแปลง " + " ข้อมูลต่อไปนี้ถูกส่งไปยังตัวจัดการเหตุการณ์นี้: " + externalData ) ; ) ) ; 1.0วัตถุที่มีข้อมูลที่จะถูกส่งผ่านไปยังตัวจัดการ

ฟังก์ชันตัวจัดการเหตุการณ์

.เปลี่ยน()

วิธีการนี้ย่อมาจาก .on("change", handler) และ .trigger("change")

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

ตัวอย่างเช่น เรามี HTML ต่อไปนี้:

ตัวเลือกที่ 1 ตัวเลือกที่ 2 ทริกเกอร์ตัวจัดการ

คุณสามารถแนบตัวจัดการเหตุการณ์ได้ดังนี้:

$(".target").change(function() ( alert("Handler for .change() called."); ));

ตอนนี้เมื่อเราเปลี่ยนค่าขององค์ประกอบที่เลือก เราจะเห็นข้อความ นอกจากนี้ยังจะปรากฏขึ้นหากมีการเปลี่ยนแปลงช่องอื่น แต่หลังจากสลับไปใช้ช่องอื่นแล้ว หากองค์ประกอบสูญเสียโฟกัสโดยไม่มีการเปลี่ยนแปลงใดๆ เหตุการณ์นั้นจะไม่เกิดขึ้น เพื่อที่จะทริกเกอร์เหตุการณ์นี้ด้วยตัวเอง เพียงเรียกใช้เมธอด .change() โดยไม่มีข้อโต้แย้ง:

$("#other").click(function() ( $(".target").change(); ));

หลังจากรันโค้ดนี้แล้ว เราจะเห็นข้อความจากรายการก่อนหน้า ครั้งนี้เราจะได้เจอเขาสองครั้งเพราะ... เรามีสององค์ประกอบในรูปแบบของเรา

ตัวอย่าง: