Làm cách nào để kích hoạt nút trong HTML?

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út

Trạ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

5

Khi 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óa

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

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ật

CSS

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 <= 0) {
        $("#myBtn").removeAttr("disabled");
        $("#myBtn").removeClass().addClass("btnEnable");
        $("#myTimer").fadeTo(2500, 0);
        myBtn.innerHTML = "Click Me!";
        return;
    }
    sec -= 1;
    window.setTimeout(countDown, 1000);
}

Trong ví dụ này, bạn sẽ nhận thấy rằng hầu hết mã được viết bằng JavaScript thuần túy. Tuy nhiên, có ba dòng mã tận dụng thư viện jQuery. Hai câu lệnh jQuery đầu tiên giải quyết việc loại bỏ thuộc tính và lớp bị vô hiệu hóa cũng như kích hoạt lớp

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

4 trên nút HTML

Cá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ật

Chú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

Tại sao nút của tôi không hoạt động trong HTML?

Làm cách nào để đặt hành động của nút trong HTML?

Làm cách nào để tạo một nút phản hồi trong HTML?