ขั้นตอน OnChange (ชื่อ: สตริง) เปลี่ยนฟิลด์ใด ๆ หรือคลิกปุ่ม เปลี่ยนตัวจัดการเหตุการณ์หรือแหล่งที่มา วาดเว็บฟอร์มใหม่ตามเหตุการณ์ onchange
_องค์ประกอบ">
HTML
เนื้อความ ( display: grid; grid-template-areas: "select result"; ) เลือก ( grid-area: select; ) .result ( grid-area: result; )
จาวาสคริปต์
const selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => ( const result = document.querySelector(".result"); result.textContent = `คุณชอบ $(event.target.value)`; ));ผลลัพธ์
องค์ประกอบการป้อนข้อความ
สำหรับองค์ประกอบบางอย่างได้แก่ เหตุการณ์การเปลี่ยนแปลงจะไม่เกิดขึ้นจนกว่าตัวควบคุมจะสูญเสียโฟกัส ลองป้อนบางสิ่งลงในฟิลด์ด้านล่าง จากนั้นคลิกที่อื่นเพื่อทริกเกอร์เหตุการณ์
HTML
จาวาสคริปต์
อินพุต const = 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
| เดสก์ท็อป | มือถือ | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| โครเมียม | ขอบ | ไฟร์ฟอกซ์ | อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โอเปร่า | ซาฟารี | มุมมองเว็บ Android | โครมสำหรับแอนดรอยด์ | ไฟร์ฟอกซ์สำหรับ Android | โอเปร่าสำหรับ Android | ซาฟารีบน iOS | ซัมซุงอินเตอร์เน็ต | |
| เมื่อมีการเปลี่ยนแปลง | รองรับ Chrome เต็มรูปแบบ ใช่ | รองรับ Edge เต็มรูปแบบ 12 | รองรับ Firefox เต็มรูปแบบ ใช่ | การสนับสนุน IE เต็มรูปแบบ ใช่ | รองรับ Opera เต็มรูปแบบ ใช่ | รองรับ Safari เต็มรูปแบบ ใช่ | รองรับ WebView Android เต็มรูปแบบ ใช่ | รองรับ Chrome Android เต็มรูปแบบใช่ | รองรับ Firefox Android อย่างเต็มรูปแบบ ใช่ | รองรับ Opera Android เต็มรูปแบบ ใช่ | Safari iOS รองรับเต็มรูปแบบ ใช่ | Samsung Internet Android รองรับเต็มรูปแบบ ใช่ |
ตำนาน
การสนับสนุนอย่างเต็มที่การสนับสนุนอย่างเต็มที่เบราว์เซอร์ที่แตกต่างกันไม่เห็นด้วยเสมอไปว่าควรเริ่มเหตุการณ์การเปลี่ยนแปลงสำหรับการโต้ตอบบางประเภทหรือไม่ ตัวอย่างเช่น การนำทางด้วยแป้นพิมพ์ในองค์ประกอบแสดงถึงการควบคุมที่มีเมนูตัวเลือก">
ฉันมีองค์ประกอบอินพุตและต้องการตรวจสอบความยาวของเนื้อหาต่อไป และเมื่อใดก็ตามที่ความยาวเท่ากับขนาดที่กำหนด ฉันต้องการเปิดใช้งานปุ่มส่ง แต่ฉันประสบปัญหากับเหตุการณ์ 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 (ชื่อ: สตริง); เริ่ม // หากฟิลด์ราคาหรือปริมาณมีการเปลี่ยนแปลง ให้คำนวณจำนวนเงินถ้า Name="price" หรือ Name="cnt" ดังนั้น Summa:= RoundMul(ราคา, Cnt, 2); // หากช่องจำนวนเงินมีการเปลี่ยนแปลง เราจะคำนวณราคาถ้า Name="summa" ดังนั้นราคา:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); จบ;
คุณสามารถบรรลุผลที่คล้ายกันได้โดยใช้ตัวจัดการ OnPriceChange, OnCntChange และ OnSummaChange
ตัวอย่าง: ขั้นตอน OnPriceChange; เริ่มต้นสรุป:= RoundMul(ราคา, Cnt, 2); จบ; ขั้นตอน OnCntChange; เริ่มต้นสรุป:= RoundMul(ราคา, Cnt, 2); จบ; ขั้นตอน OnSummaChange; ราคาเริ่มต้น:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); จบ;
ตัวจัดการนี้สะดวกในการใช้งานเมื่อจัดระเบียบโมดูลาร์ เนื่องจากจะรวบรวมข้อมูลเกี่ยวกับเหตุการณ์เกือบทั้งหมด ตัวอย่างเช่น:
Var BaseClass: ตัวแปร; ขั้นตอนการสร้าง; เริ่มต้น BaseDocument.Init (ตนเอง); // สร้างคลาสพื้นฐานและแลกเปลี่ยนข้อมูลอ้างอิงกับคลาสนั้น กำลังเริ่มต้นเอกสารจบ; ขั้นตอนการเปลี่ยนแปลง (ชื่อ: สตริง); เริ่มต้น BaseClass.OnChange (ชื่อ); // การส่งผ่านเหตุการณ์ไปยังคลาสฐานจบ;
หรือตัวอย่างของการทำให้เป็นโมดูลโดยใช้ซิงเกิลตัน (คุณสมบัติของโมดูลบนแท็บคำอธิบายของเอดิเตอร์):
ขั้นตอนการสร้าง; เริ่มต้น BaseClass.OnCreate (ตนเอง); // เริ่มต้นเอกสารจบ; ขั้นตอนการเปลี่ยนแปลง (ชื่อ: สตริง); เริ่มต้น BaseClass.OnChange (ตนเอง, ชื่อ); // การส่งผ่านเหตุการณ์ไปยังคลาสฐานจบ;
ตั้งค่าตัวจัดการสำหรับการเปลี่ยนแปลงองค์ประกอบแบบฟอร์มที่ระบุหรือเริ่มเหตุการณ์นี้ วิธีการนี้มีกรณีการใช้งานสามกรณี:
ตัวจัดการ (วัตถุเหตุการณ์)— ฟังก์ชั่นที่จะถูกติดตั้งเป็นตัวจัดการ เมื่อเรียกก็จะได้รับวัตถุเหตุการณ์ เหตุการณ์Object .
ตัวจัดการ (วัตถุเหตุการณ์)- ดูด้านบน
ข้อมูลเหตุการณ์— ข้อมูลเพิ่มเติมที่ส่งผ่านไปยังตัวจัดการ โดยจะต้องแสดงด้วยออบเจ็กต์ในรูปแบบ: (fName1:value1, fName2:value2, ...)
คุณสามารถลบตัวจัดการที่ติดตั้งไว้ได้โดยใช้วิธี unbind()
ตัวเลือกทั้งสามสำหรับการใช้วิธีการนี้คล้ายคลึงกับวิธีอื่น (ดูด้านบน) ดังนั้นรายละเอียดทั้งหมดของการใช้ change() จึงมีอยู่ในคำอธิบายของวิธีการเหล่านี้
โปรดจำไว้ว่าเหตุการณ์การเปลี่ยนแปลงไม่ได้เกิดขึ้นโดยตรงในขณะที่มีการเปลี่ยนแปลง แต่เกิดเฉพาะเมื่อองค์ประกอบแบบฟอร์มที่เปลี่ยนแปลงสูญเสียโฟกัสเท่านั้น
ตัวอย่าง
// ตั้งค่าตัวจัดการเหตุการณ์การเปลี่ยนแปลงให้กับองค์ประกอบด้วยตัวระบุ foo$("#foo" ) .change (ฟังก์ชั่น () ( การแจ้งเตือน ( "องค์ประกอบ foo ได้รับการแก้ไขแล้ว") ; } ) ; // เรียกเหตุการณ์การเปลี่ยนแปลงบนองค์ประกอบ foo$("#foo" ) .change () ; // ตั้งค่าตัวจัดการเหตุการณ์การเปลี่ยนแปลงอื่น คราวนี้เป็นองค์ประกอบ // มีคลาสบล็อก เราจะส่งข้อมูลเพิ่มเติมไปยังตัวจัดการ$(".block" ) .change (( a: 12 , b: "abc" ) , ฟังก์ชัน (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b ; "องค์ประกอบที่มีบล็อกคลาสได้รับการแก้ไขแล้ว"+ "ข้อมูลต่อไปนี้ถูกส่งไปยังตัวจัดการเหตุการณ์นี้: "+ ข้อมูลภายนอก);