Trong đoạn trích này, chúng ta sẽ khám phá phương thức
Submit
1 cùng với sự kiện
Submit
2. Và đối với chính ví dụ - chúng tôi sẽ tạo một trường nhập liệu đơn giản và một nút, sau đó sử dụng
Submit
1 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
Gửi đi
Đ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
2 thay vì
Submit
5Khi sử dụng
Submit
5 - người dùng phải nhấp vào bên ngoài biểu mẫu hoặc nhắm mục tiêu trường nhập tiếp theo để thay đổi trạng thái, điều này trong một số trường hợp có thể gây nhầm lẫn cho người dùng. Ngoài ra, điều thú vị về sự kiện
Submit
2 là nó sẽ tự động tắt lại nút khi trường nhập đã bị xóaBạ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
0 của bạn vì nút này sẽ hiển thị văn bản bạn đã nhập bất cứ khi nào bạn nhấp vào nút ở trạng thái hoạt động [không bị tắt] Bạn có thể đã truy cập một số trang web có các biện pháp kiểm soát nhất định, chẳng hạn như trì hoãn việc bật các nút và liên kết trên trang hoặc yêu cầu gửi mã captcha trước khi bật các thành phần trên trang
Điều này thường được thực hiện để đảm bảo rằng các trình thu thập dữ liệu web và bot truy cập trang của bạn, không tự ý gọi các thành phần mục tiêu trên trang. Một ví dụ khác có thể là bạn muốn trình bày nội dung nhất định cho người dùng, quảng cáo hoặc bản trình bày video trước khi bật nội dung bổ sung
Trong hướng dẫn này, chúng tôi sẽ đề cập đến cách xây dựng đồng hồ đếm ngược có thể được sử dụng để trì hoãn việc bật nút trên trang. Đây có thể là một cách hiệu quả để đảm bảo rằng khách truy cập của bạn là con người và cũng yêu cầu phải có sự chậm trễ trước khi phục vụ khách truy cập nội dung bổ sung. Nội dung bổ sung này có thể là video, liên kết tải xuống hoặc một số tài nguyên khác trên trang web của bạn
HTML
Chúng ta sẽ bắt đầu với một ví dụ HTML đơn giản. Tất cả những gì chúng ta cần cho ví dụ này là một phần tử
Submit
8 đơn giản. Trong ví dụ này, chúng tôi sẽ tắt phần tử
Submit
8 theo mặc định để khách truy cập không thể nhấp vào nút cho đến khi bộ đếm thời gian đạt đến '00' giây. Sau khi hẹn giờ kết thúc, nút sẽ được bật. Chúng tôi sẽ kích hoạt nút bằng JavaScript
Please wait...
Có một vài điều bạn có thể muốn lưu ý về mã HTML này. Nút có thuộc tính
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];
}];
0 mà chúng tôi sẽ sử dụng để tham chiếu trong JavaScript của mình, thuộc tính bị vô hiệu hóa không có giá trị và sự kiện 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];
}];
1 mà chúng tôi chỉ sử dụng cho mục đích minh họa. Sự kiện 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];
}];
1 sẽ không được kích hoạt cho đến khi nút được bậtCSS
Chúng tôi sử dụng CSS để tạo kiểu cho bộ hẹn giờ cũng như các thành phần khác được sử dụng trong bản trình diễn này, chẳng hạn như các phần tử
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];
}];
3 bao quanh bộ hẹn giờ và nút#wrapper {
text-align:center;
border:1px solid #7F7F7F;
width:150px;
margin:25px auto;
padding:25px;
background-color:#E3E4E4;
}
#myTimer {
font:64px Tahoma bold;
padding:20px;
display:block;
}
button {
width:125px;
padding:10px;
}
.btnEnable {
background-color:#E6F9D2;
border:1px solid #97DE4C;
color:#232323;
cursor:pointer;
}
.btnDisable {
background-color:#FCBABA;
border:1px solid #DD3939;
color:#232323;
cursor:wait;
}
Trong mẫu CSS của chúng tôi, chúng tôi sử dụng một lớp khác cho nút bật và tắt
JavaScript và jQuery
Hầu hết mã được sử dụng trong ví dụ này là JavaScript thuần túy. Tuy nhiên, có một vài dòng jQuery đi kèm. Vì vậy, hãy đảm bảo rằng bạn tham khảo thư viện jQuery trong trang của mình
var sec = 15;
var myTimer = document.getElementById['myTimer'];
var myBtn = document.getElementById['myBtn'];
window.onload = countDown;
function countDown[] {
if [sec < 10] {
myTimer.innerHTML = "0" + sec;
} else {
myTimer.innerHTML = sec;
}
if [sec {
console.log["You entered:", document.querySelector[".form-input"].value];
}];
4 trên nút HTMLCái thứ ba tạo hiệu ứng động và làm mờ dần bộ hẹn giờ trong 2500 mili giây. Không bắt buộc phải sử dụng jQuery cho ví dụ này, nhưng tôi chỉ đưa nó vào vì jQuery làm cho các bước cụ thể đó dễ dàng hơn nhiều khi so sánh với JavaScript tương đương
Trong ví dụ này, chúng tôi đã gán biến
#wrapper {
text-align:center;
border:1px solid #7F7F7F;
width:150px;
margin:25px auto;
padding:25px;
background-color:#E3E4E4;
}
#myTimer {
font:64px Tahoma bold;
padding:20px;
display:block;
}
button {
width:125px;
padding:10px;
}
.btnEnable {
background-color:#E6F9D2;
border:1px solid #97DE4C;
color:#232323;
cursor:pointer;
}
.btnDisable {
background-color:#FCBABA;
border:1px solid #DD3939;
color:#232323;
cursor:wait;
}
0 cho 15, đây là số giây mà chúng tôi muốn bộ đếm thời gian của mình bắt đầu đếm ngược lúc. Khi đếm ngược đến '00', nút được bậtChúng tôi đã sử dụng phương thức
#wrapper {
text-align:center;
border:1px solid #7F7F7F;
width:150px;
margin:25px auto;
padding:25px;
background-color:#E3E4E4;
}
#myTimer {
font:64px Tahoma bold;
padding:20px;
display:block;
}
button {
width:125px;
padding:10px;
}
.btnEnable {
background-color:#E6F9D2;
border:1px solid #97DE4C;
color:#232323;
cursor:pointer;
}
.btnDisable {
background-color:#FCBABA;
border:1px solid #DD3939;
color:#232323;
cursor:wait;
}
1 để tạo độ trễ 1000 mili giây hoặc 1 giây trước khi hàm #wrapper {
text-align:center;
border:1px solid #7F7F7F;
width:150px;
margin:25px auto;
padding:25px;
background-color:#E3E4E4;
}
#myTimer {
font:64px Tahoma bold;
padding:20px;
display:block;
}
button {
width:125px;
padding:10px;
}
.btnEnable {
background-color:#E6F9D2;
border:1px solid #97DE4C;
color:#232323;
cursor:pointer;
}
.btnDisable {
background-color:#FCBABA;
border:1px solid #DD3939;
color:#232323;
cursor:wait;
}
2 được thực thi lại. Khi biến #wrapper {
text-align:center;
border:1px solid #7F7F7F;
width:150px;
margin:25px auto;
padding:25px;
background-color:#E3E4E4;
}
#myTimer {
font:64px Tahoma bold;
padding:20px;
display:block;
}
button {
width:125px;
padding:10px;
}
.btnEnable {
background-color:#E6F9D2;
border:1px solid #97DE4C;
color:#232323;
cursor:pointer;
}
.btnDisable {
background-color:#FCBABA;
border:1px solid #DD3939;
color:#232323;
cursor:wait;
}
0 bằng '0', hàm tồn tại và không còn được thực thi