Trong đoạn trích này, chúng ta sẽ khám phá phương thức addEventListener cùng với sự kiện
Submit
addEventListener cùng với chức năng tùy chỉnh để thay đổi trạng thái của nútTrạng thái sẽ thay đổi từ bị vô hiệu hóa [mặc định] sang được kích hoạt bất cứ khi nào người dùng nhập nội dung nào đó vào trường nhập liệu. Như vậy, bạn có thể sử dụng phương pháp này để ngăn người dùng gửi biểu mẫu chưa được điền đầy đủ. Điều này cũng thường được gọi là "các trường bắt buộc"
Bây giờ, trường hợp sử dụng cho điều này là trên cơ sở từng trường hợp. Ví dụ: nếu bạn viết một trường nhập email và thêm bắt buộc vào trường đó, người dùng có thể nhấp vào nút, nhưng nó sẽ không gửi email thực cho đến khi biểu mẫu được điền chính xác. Đọc thêm về điều này trên MDN
Hãy xem một số mã, một ví dụ và nói về những gì đang xảy ra
CSSHTMLJavaScript
.form-style {
display: flex;
place-content: center;
padding: 1rem;
background-color: #f5f2f0;
}
.form-button {
margin-left: 10px;
}
Submit
const formInput = document.querySelector[".form-input"];
const formButton = document.querySelector[".form-button"];
// the default state is 'disabled'
formButton.disabled = true;
// alternative is to use "change" - explained below
formInput.addEventListener["keyup", buttonState];
function buttonState[] {
if [document.querySelector[".form-input"].value === ""] {
formButton.disabled = true; // return disabled as true whenever the input field is empty
} else {
formButton.disabled = false; // enable the button once the input field has content
}
}
// just verifying that the button has been clicked
formButton.addEventListener["click", [] => {
console.log["You entered:", document.querySelector[".form-input"].value];
}];Và đây là một hình thức demo để giới thiệu kết quả cuối cùng
Nộp
Điều đầu tiên cần lưu ý ở đây là trạng thái nút thay đổi ngay sau khi bạn nhập một số văn bản
Điều này là do đối với bản trình diễn này, chúng tôi đang sử dụng trình lắng nghe sự kiện
Submit
Submit
Khi sử dụng
Submit
Submit
Bạn cũng có thể xác minh rằng nút này hoạt động bằng cách kiểm tra
Submit
ồ ồ. Vâng, điều này sẽ hiển thị nếu bất kỳ điều nào trong số đó không xảy ra, nhưng bạn muốn điều ngược lại, điều này sẽ thực hiện thủ thuật
If[
[Len[SerialEntry_ETD_Input.Text]=0]
||
[Verification_ETD_Dropdown.Selected.Value="-"]
||
[Filters_ETD_Dropdown.Selected.Value="-"],
DisplayMode.Disabled,
DisplayMode.Edit
]Vui lòng 'Đánh dấu là giải pháp' nếu bài đăng của ai đó trả lời câu hỏi của bạn và luôn 'Thích' các bài đăng bạn thích hoặc đã giúp bạn
Cảm ơn.
Bạn và mọi người khác trong cộng đồng làm cho cộng đồng trở thành một nơi tuyệt vời và thân thiện, tiếp tục đặt câu hỏi và đảm bảo 'thích' bất cứ điều gì khiến bạn 'Ứng dụng
Sancho Harker, MVP
Tìm hiểu cách bật hoặc tắt các nút bằng javascript và jQuery dựa trên việc trường nhập liệu được điền hay trống
Nếu bạn là người mới bắt đầu hoặc chưa quen lắm với javascript hoặc jQuery, chúng tôi khuyên bạn nên xem qua toàn bộ bài viết. Tuy nhiên, nếu bạn chỉ đang tìm mã,
Mục lục
- Giới thiệu về nút tắt/bật
- Triển khai mã bằng Javascript và jQuery
- Hình dung
Giới thiệu về nút tắt/bật
Thông thường, trong khi điền vào các biểu mẫu web, bạn có nhận thấy nút gửi không hoạt động như thế nào trừ khi chúng tôi đã điền vào tất cả các trường bắt buộc không?
Điều này được thực hiện bằng cách kiểm soát trạng thái của nút [bật/tắt] dựa trên việc trường đầu vào được điền hay trống. Nguyên tắc tương tự áp dụng cho hộp kiểm và nút radio
Bạn có muốn triển khai một tính năng như vậy trên biểu mẫu web của mình không?
Trước khi đi sâu vào mã, trước tiên chúng ta hãy xem logic đằng sau việc chuyển đổi giữa các trạng thái khác nhau của nút
Logic đằng sau việc chuyển đổi giữa trạng thái tắt và bật của các nút
- Đặt nút về trạng thái bị vô hiệu hóa ngay từ đầu
- Nếu giá trị đầu vào của trường bắt buộc trống, hãy để nút vẫn bị tắt. [Trạng thái bị tắt = TRUE]
- Nếu giá trị đầu vào của trường bắt buộc không trống, hãy thay đổi trạng thái của nút thành đã bật. [Hoặc đặt trạng thái vô hiệu hóa = FALSE]
Dưới đây, chúng ta sẽ xem cách tắt/bật một nút với một trường văn bản bắt buộc được triển khai bằng Javascript và jQuery
Thực thi mã để thay đổi trạng thái của nút
1. Sử dụng Javascript
MỘT] HTML
Thêm mã HTML sau vào trình chỉnh sửa của bạn
//defining button and input field
Click Me
Giải thích mã
Sử dụng đoạn mã trên, chúng tôi đã xác định hai thành phần HTML là trường văn bản đầu vào và nút
B] Mã Javascript
//Program to disable or enable a button using javascript
let input = document.querySelector[".input"];
let button = document.querySelector[".button"];
button.disabled = true; //setting button state to disabled
input.addEventListener["change", stateHandle];
function stateHandle[] {
if [document.querySelector[".input"].value === ""] {
button.disabled = true; //button remains disabled
} else {
button.disabled = false; //button is enabled
}
}
Giải thích mã
1. Bây giờ, bằng cách sử dụng javascript, chúng tôi lưu trữ một tham chiếu đến từng phần tử, cụ thể là đầu vào và nút
2. Theo mặc định, trạng thái của nút được bật trong HTML, do đó, bằng cách đặt bị vô hiệu hóa = true, chúng tôi đã tắt nút cho người dùng
3. Sau đó, chúng tôi thêm một trình xử lý sự kiện [addEventListener] vào trường đầu vào với thay đổi thuộc tính sự kiện để theo dõi sự tương tác với các phần tử
4. Ở đây chúng tôi sử dụng thuộc tính thay đổi để theo dõi khi người dùng nhập văn bản bên trong trường nhập liệu và chạy một chức năng tương ứng
5. Hàm chúng ta chạy ở đây được gọi là stateHandle[] được kích hoạt mỗi khi có thay đổi về trạng thái của trường nhập liệu
6. Hàm so sánh giá trị của trường nhập [trường văn bản] với một chuỗi rỗng
7. Nếu người dùng chưa nhập bất cứ thứ gì, thì trường văn bản sẽ bằng [ === ] với chuỗi trống và nút sẽ vẫn bị vô hiệu hóa [bị vô hiệu hóa = đúng]
8. Nếu người dùng nhập văn bản vào trường nhập, thì nút sẽ được bật [tắt = sai]
Hoàn thành mã
Click Me
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;
}
}
đầu ra
A] Trạng thái không hoạt độngSử dụng jQuery để bật/tắt nút
________số 81. Đối với phương thức jQuery cũng vậy, chúng tôi bắt đầu bằng cách tạo một nút HTML và trường văn bản [submit và tbName tương ứng] và ban đầu đặt nút ở trạng thái bị vô hiệu hóa
2. Ở đây, hàm ready[] được sử dụng để cung cấp chức năng sau khi tài liệu đã được tải
3. Các. phương thức on[] trong jquery đính kèm trình xử lý sự kiện vào trường đầu vào [tbName]
4. Sự kiện thay đổi sẽ kiểm tra các thay đổi trong trường đầu vào và chạy chức năng tương ứng
5. Giống như trong javascript, nếu trường văn bản trống thì nút vẫn bị tắt, nếu không thì nút sẽ được bật.
6. đây. Phương thức prop[] được sử dụng để thay đổi trạng thái của nút
Hình dung
Bạn có thể thử với đoạn mã trên bằng trình chỉnh sửa này và xem phần nào của mã thực hiện chức năng gì. Bạn cũng có thể thử các tùy chọn CSS khác nhau cho nút, v.v.