Cách tạo nút chỉ đọc trong HTML

Sử dụng jQuery để tắt một nút có nhiều lợi thế vì nó sẽ cho phép bạn bật và tắt nút dựa trên tương tác của người dùng. Bạn sẽ dễ dàng sử dụng mã này với các triển khai jQuery khác. Bắt đầu nào

Bắt đầu, chúng ta sẽ tạo một biểu mẫu HTML rất cơ bản sẽ có đầu vào và một nút, biểu mẫu đơn giản này sẽ giả vờ là một biểu mẫu tìm kiếm, nhưng sẽ không hoạt động như một phần của hướng dẫn này

Ý tưởng là chúng tôi không muốn người dùng có thể nhấn nút tìm kiếm cho đến khi họ nhập một số văn bản vào hộp nhập tìm kiếm

Bây giờ chúng ta có một biểu mẫu HTML cơ bản và một số CSS để làm việc, hãy chuyển sang jQuery

Trước khi chúng tôi làm bất cứ điều gì, chúng tôi đưa thư viện jQuery vào trang của mình để chúng tôi có thể… sử dụng jQuery. Chúng tôi làm điều này bằng cách thêm dòng sau vào tiêu đề của trang

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>

Điều đầu tiên chúng ta cần làm là nắm bắt sự kiện tương tác của người dùng, có rất nhiều sự kiện để lựa chọn nhưng với mục đích này, tôi tin rằng sự kiện tốt nhất để chọn sẽ là keyup. Điều này có nghĩa là chúng tôi có thể kích hoạt một bộ mã để chạy mỗi khi người dùng nhấn và thả một phím trong hộp văn bản searchInput

Đầu tiên, chúng tôi gói tất cả mã của mình vào

$(function(){ });

Điều này sẽ yêu cầu trình duyệt thực thi bất kỳ mã nào trong khi tải trang. Sau đó, chúng tôi đính kèm sự kiện keyup vào đầu vào tìm kiếm mà chúng tôi đã tạo bằng cách sử dụng đoạn mã sau

$('#searchInput').keyup();

Bây giờ chúng tôi đã đính kèm sự kiện vào đầu vào của mình, chúng tôi có thể tiếp tục và thêm một số mã để đạt được kết quả mong muốn. Để mã được thực thi khi nhấn phím người dùng và sau đó nhả ra, chúng ta cần bọc mã trong một hàm và đưa mã vào phương thức kích hoạt sự kiện keyup

Đoạn mã trên được nhận xét tốt để làm cho nó dễ hiểu nhất có thể, nhưng tôi sẽ đi vào chi tiết hơn ở đây. Đầu tiên chúng ta kiểm tra xem hiện tại input có chữ nào chưa nhập chưa

if ($(this).val() == '') {}

$(this), bởi vì nó được bao bọc trong một phương thức sự kiện đang đề cập đến phần tử mà sự kiện được đính kèm, vì vậy trong trường hợp này, trong phần tử #searchInput

Điều đáng nói ở đây là tại sao tôi lại chọn sự kiện keyup thay vì sự kiện keydown chẳng hạn. Nếu chúng tôi đã đính kèm sự kiện keydown thì khi chúng tôi kiểm tra bất kỳ đầu vào nào, chúng tôi sẽ kiểm tra ngay trước khi một số đầu vào sắp được nhập, vì nó đang bật phím xuống. Trường hợp với keyup, chúng tôi đang kiểm tra sau khi bất kỳ đầu vào nào đã được nhập hoặc xóa. (ví dụ: họ đã sử dụng khoảng trắng). Điều này sẽ trở nên rõ ràng khi chúng ta có thể thấy nó hoạt động

Tùy thuộc vào kết quả của câu lệnh if, nếu đầu vào bằng không thì chúng tôi cần đảm bảo nút bị tắt, vì vậy chúng tôi sử dụng đoạn mã sau

$('.enableOnInput').prop('disabled', true);

Lưu ý cách điều này đang tham chiếu đến lớp enableOnInput chứ không phải ID, vì nó sử dụng một. trái ngược với #. Một ID sẽ hoạt động tốt ở đây, nhưng nếu chúng ta muốn vô hiệu hóa nhiều phần tử biểu mẫu trong tương lai, thì chúng ta chỉ cần áp dụng lớp này cho nó để JavaScript cũng hoạt động trên các đầu vào/nút đó

Mã này thực sự đang làm gì, là đặt thuộc tính bị vô hiệu hóa trên phần tử HTML thành bị vô hiệu hóa, vì vậy khi mã này được thực thi, nút HTML sẽ giống như sau

<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />

Điều này bây giờ sẽ ngăn chặn bất kỳ hành động nào khi người dùng nhấp vào nút và cũng sẽ tô xám nút để người dùng thấy rằng nút bị tắt

Khi chúng tôi kiểm tra xem liệu có bất kỳ văn bản nào được thêm vào phần tử searchInput hay không và chúng tôi tìm thấy một số văn bản, sau đó chúng tôi có thể đặt thuộc tính bị vô hiệu hóa thành sai để kích hoạt nút này, với đoạn mã sau

$('.enableOnInput').prop('disabled', false);

Điều này thực sự sẽ loại bỏ thuộc tính làm cho đầu vào của nút trông giống như sau

<input type='submit' name='submit' id='submitBtn' class='enableOnInput' />

Điều này sau đó có nghĩa là người dùng sẽ được tự do nhấp vào nút gửi và gửi biểu mẫu. Còn một việc cuối cùng chúng ta phải làm trước khi kịch bản đơn giản này hoàn tất. Khi chúng tôi tạo biểu mẫu HTML và tạo nút gửi, chúng tôi đã không thêm tùy chọn bị vô hiệu hóa='bị vô hiệu hóa' theo mặc định, điều này có nghĩa là khi trang tải lần đầu tiên và sự kiện keyup chưa bao giờ được kích hoạt, nút này sẽ được bật. Để ngăn chặn điều này, chúng tôi chỉ cần thêm disable=’disabled’ vào HTML

Dưới đây là tất cả mã cho toàn bộ quá trình triển khai, vui lòng sao chép, dán và sử dụng theo ý muốn

Để bật/tắt một button với jQuery bạn cần sử dụng 2 phương thức attr() và removeAttr() như sau

Cảm ơn bạn đã đọc hướng dẫn này, tôi hy vọng nó hữu ích, vui lòng cho tôi biết suy nghĩ của bạn và bất kỳ cách nào khác mà bạn sẽ sử dụng jQuery để bật hoặc tắt một nút. Bình luận và chia sẻ

Các nút có thể được đọc chỉ?

Làm cách nào để tắt một nút trong HTML dựa trên điều kiện?

Làm cách nào để tắt nhấp vào nút bằng CSS?