อีเวนต์ change ใน JavaScript

ในบทเรียนนี้ เราจะมาศึกษาเกี่ยวกับอีเวนต์ change ซึ่งเกิดขึ้นในช่องป้อนข้อมูล เมื่อมีการเปลี่ยนแปลง คือนัยอย่างไร? สมมติว่า คุณมีอินพุตและมีข้อความบางอย่างอยู่ในนั้น หากคุณเปลี่ยนข้อความนั้น นั่นคือเวลาที่อีเวนต์นี้จะเกิดขึ้น

ลองดูตัวอย่าง สมมติเรามีอินพุต:

<input id="elem" value="text">

ลองให้เมื่อมีการเปลี่ยนแปลง ให้แสดงค่าใหม่ ของมันในคอนโซล:

let elem = document.querySelector('#elem');

elem.addEventListener('change', function() {
	console.log(this.value);
});

กำหนดให้มีอินพุตและพารากราฟ เมื่ออินพุตเปลี่ยนแปลง ให้แสดง ข้อความจากอินพุตไปยังพารากราฟ

กำหนดให้มีช่องทำเครื่องหมาย เมื่อช่องทำเครื่องหมายเปลี่ยนแปลง ให้แสดง สถานะใหม่ของมันบนหน้าจอ

อธิบายความแตกต่างระหว่างอีเวนต์ blur และ change

กำหนดให้มีอินพุต เมื่อมันเปลี่ยนแปลง ให้ตรวจสอบว่าจำนวน อักขระในมันน้อยกว่า 5 ตัวหรือไม่ หากน้อยกว่า - ให้เปลี่ยนสีขอบของอินพุตเป็น สีเขียว และหากมากกว่า - เป็นสีแดง