วิธีเปิดใช้งานและปิดใช้งานปุ่มด้วย JavaScript (ตามสถานะ)

เรียนรู้วิธีปิดใช้งานหรือเปิดใช้งานปุ่มโดยขึ้นอยู่กับว่าช่องป้อนข้อมูลว่างเปล่าหรือไม่

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

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

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
  }
}

ตอนนี้คุณมีปุ่มที่ปิดใช้งานตราบใดที่ฟิลด์ป้อนข้อมูลของคุณว่างเปล่า และเปิดใช้งานทันทีที่คุณเริ่มกรอก

ตรวจสอบการสาธิตพร้อมรหัสการทำงานทั้งหมด

รหัสสาธิต

วิธีการทำงานของโค้ด HTML และ JavaScript

ขั้นแรก เรากำหนดองค์ประกอบ HTML สองสามรายการ ช่องใส่ข้อมูล และปุ่ม จากนั้นเราใช้ JavaScript เพื่อสร้างสองตัวแปรเพื่อเก็บข้อมูลอ้างอิงแต่ละองค์ประกอบ input &button . ตอนนี้เรามีการควบคุมอย่างเต็มที่เพื่อจัดการแต่ละองค์ประกอบโดยทางโปรแกรม

เราเริ่มต้นด้วยการปิดสถานะของปุ่ม โดยค่าเริ่มต้น สถานะของปุ่มจะ เปิดใช้งาน ใน HTML โดยใช้ disabled = true ตอนนี้ปุ่มเป็นสีเทา (ปิดใช้งาน) ใน UI สำหรับผู้ใช้

จากนั้นเราแนบตัวจัดการเหตุการณ์ (addEventListener ) ไปที่ input ตัวแปรที่มีคุณสมบัติเหตุการณ์ change ซึ่งเป็นคุณสมบัติที่ฟัง (watches) สำหรับการโต้ตอบกับองค์ประกอบ ในกรณีนี้ เราต้องการทราบว่าเมื่อใดที่ผู้ใช้โต้ตอบกับช่องป้อนข้อมูลโดยพิมพ์ข้างใน จากนั้นจึงตอบสนองต่อเหตุการณ์นั้นด้วยการเรียกใช้ฟังก์ชัน

ฟังก์ชันที่เราเรียกใช้เรียกว่า stateHandler และเริ่มทำงานทุกครั้งที่มีการเปลี่ยนแปลงในช่องป้อนข้อมูล

รหัสภายใน stateHandler กล่าวว่า “ถ้าค่าของช่องใส่เป็นสตริงว่าง (=== '' ) จากนั้นปิดการใช้งานปุ่ม มิฉะนั้น (else ) เปิดใช้งาน