เรียนรู้วิธี disable หรือ enable ปุ่ม ขึ้นอยู่กับว่าช่องกรอกว่างหรือไม่
เมื่อคุณกรอกฟอร์มบนเว็บ คุณจะสังเกตว่าบ่อยครั้งคุณไม่สามารถส่งฟอร์มได้จนกว่าช่องกรอกข้อความทั้งหมดหรือบางส่วนจะถูกกรอก (required fields) หลักการเดียวกันใช้กับ checkboxes และ radio buttons
นี่คือวิธีควบคุม state ของปุ่ม (enabled vs disabled) ตามว่าช่องกรอกว่างหรือไม่
HTML
เพิ่ม HTML ต่อไปนี้ในเอดิเตอร์ของคุณ:
<input class="input" type="text" placeholder="fill me" /> <button class="button">Click Me</button>JavaScript
เพิ่ม JavaScript ต่อไปนี้
let input = document.querySelector(".input") let button = document.querySelector(".button") button.disabled = true input.addEventListener("change", stateHandle) function stateHandle() { if (document.querySelector(".input").value === "") { button.disabled = true } else { button.disabled = false } }ตอนนี้คุณมีปุ่มที่ disabled ตราบใดที่ช่องกรอกว่าง และ enabled ทันทีที่คุณเริ่มกรอก
ดู demo พร้อมโค้ดที่ทำงานทั้งหมด
Demo code.
วิธีการทำงานของโค้ด HTML & JavaScript
ก่อนอื่น เรากำหนดอิลีเมนต์ HTML 2 ตัว ช่องกรอกและปุ่ม จากนั้นใช้ JavaScript สร้างตัวแปร 2 ตัวเก็บอ้างอิงแต่ละอิลีเมนต์ input & button ตอนนี้เรามีการควบคุมเต็มที่เพื่อจัดการแต่ละอิลีเมนต์ด้วยโปรแกรม
เราเริ่มต้นด้วยการ disable state ของปุ่ม โดยปกติ state ของปุ่มคือ enabled ใน HTML ด้วยการใช้ disabled = true ปุ่มจึงเป็นสีเทา (disabled) ใน UI สำหรับผู้ใช้
จากนั้นเราแนบ event handler (addEventListener) เข้ากับตัวแปร input ด้วย event property change ซึ่งเป็น property ที่ฟัง (ดู) การโต้ตอบกับอิลีเมนต์ ในกรณีนี้ เราอยากรู้เมื่อผู้ใช้โต้ตอบกับช่องกรอกโดยการพิมพ์ภายใน และตอบสนองต่อเหตุการณ์นั้นโดยรันฟังก์ชัน
ฟังก์ชันที่เรารันชื่อ stateHandler และมันยิงทุกครั้งที่มีการเปลี่ยนแปลงภายในช่องกรอก
โค้ดภายใน stateHandler พูดว่า "ถ้าค่าของช่องกรอกเป็น empty string (=== '') ให้ disable ปุ่ม มิฉะนั้น (else) ให้ enable มัน"
