Học cách disable hoặc enable nút bấm dựa trên việc ô input có rỗng hay không.
Khi điền form trên web bạn sẽ nhận thấy thường không thể submit form cho đến khi tất cả hoặc một số trường văn bản được điền (required fields). Nguyên tắc tương tự áp dụng cho checkbox và radio button.
Đây là cách kiểm soát trạng thái nút bấm (enabled vs disabled) dựa trên ô input rỗng hay không.
HTML
Thêm HTML sau vào trình soạn thảo:
<input class="input" type="text" placeholder="fill me" /> <button class="button">Click Me</button>JavaScript
Thêm JavaScript sau
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 } }Giờ bạn có nút bị disable miễn là ô input rỗng, và enable ngay khi bắt đầu điền.
Xem demo với toàn bộ mã hoạt động.
Demo code.
Cách mã HTML & JavaScript hoạt động
Trước, định nghĩa vài phần tử HTML, ô input và nút button. Rồi dùng JavaScript tạo hai biến lưu tham chiếu từng phần tử input & button. Giờ có toàn quyền thao tác từng phần tử theo chương trình.
Bắt đầu bằng cách disable trạng thái nút. Mặc định, trạng thái nút là enabled trong HTML. Dùng disabled = true nút giờ bị xám (disabled) trên UI cho người dùng.
Sau đó gắn trình xử lý sự kiện (addEventListener) vào biến input với thuộc tính sự kiện change, thuộc tính lắng nghe (theo dõi) tương tác với phần tử. Ở đây, muốn biết khi người dùng tương tác với ô input bằng cách gõ bên trong, rồi phản ứng bằng cách chạy hàm.
Hàm chạy gọi là stateHandler và kích hoạt mỗi khi có thay đổi trong ô input.
Mã bên trong stateHandler nói "nếu giá trị ô input là chuỗi rỗng (=== '') thì disable nút, ngược lại (else) enable nó."