Trong hướng dẫn này, chúng ta sẽ hiểu về cách tắt trường nhập bằng CSS. Vì vậy, hãy bắt đầu!
Làm thế nào để vô hiệu hóa một trường nhập liệu bằng CSS?
Trong CSS, các sự kiện bị vô hiệu hóa bằng cách sử dụng “ sự kiện con trỏ ' tài sản. Vì vậy, trước tiên, hãy tìm hiểu về thuộc tính con trỏ-sự kiện.
Thuộc tính CSS “con trỏ-sự kiện” là gì?
Các ' sự kiện con trỏ ”Kiểm soát cách các phần tử HTML phản hồi hoặc hoạt động với sự kiện chạm, chẳng hạn như sự kiện nhấp hoặc chạm, trạng thái hoạt động hoặc di chuột và liệu con trỏ có hiển thị hay không.
Cú pháp
Cú pháp của sự kiện con trỏ được đưa ra như sau:
sự kiện con trỏ : Tự động | không ai ;
Thuộc tính được đề cập ở trên nhận hai giá trị, chẳng hạn như “ Tự động ' và ' không ai ”:
- Tự động: Nó được sử dụng để thực hiện các sự kiện mặc định.
- không ai: Nó được sử dụng để vô hiệu hóa các sự kiện.
Đi về phía ví dụ đã cho.
Ví dụ 1: Thêm trường nhập bằng CSS
Trong ví dụ này, trước tiên, chúng ta sẽ tạo một div và thêm một trường đầu đề và đầu vào cho nó. Sau đó, đặt loại đầu vào là “ chữ ”Và đặt giá trị của nó là“ Điền tên của bạn ”.
HTML
< div >< trung tâm >
< h1 > Vô hiệu hóa một trường nhập liệu < / h1 >
< đầu vào loại hình = 'chữ' giá trị = 'Điền tên của bạn' >
< / trung tâm >
< / div >
Sau đó, chuyển sang CSS và tạo kiểu cho div bằng cách đặt màu nền của nó là “ rgb (184, 146, 99) ”Và chiều cao là“ 150px ”.
CSS
div {lai lịch- màu sắc : rgb ( 184 , 146 , 99 ) ;
Chiều cao : 150px;
}
Đầu ra của đoạn mã được mô tả ở trên được đưa ra bên dưới. Ở đây, chúng ta có thể thấy rằng trường đầu vào của chúng ta hiện đang hoạt động và đang chấp nhận đầu vào từ người dùng:
Bây giờ, hãy chuyển sang phần tiếp theo, trong đó chúng tôi sử dụng giá trị của “ sự kiện con trỏ 'Thuộc tính' không ai ”.
Ví dụ 2: Tắt một trường nhập bằng CSS
Bây giờ chúng tôi sẽ sử dụng “ đầu vào ”Để truy cập phần tử được thêm vào tệp HTML và đặt giá trị của sự kiện con trỏ là“ không ai ”:
đầu vào {sự kiện con trỏ : không ai ;
}
Sau khi bạn triển khai thuộc tính đã nêu ở trên “ sự kiện con trỏ ' với ' không ai ”, Văn bản của trường nhập sẽ không thể chỉnh sửa được, điều này cho biết rằng trường nhập của chúng tôi đã bị vô hiệu hóa:
Đó là nó! Chúng tôi đã giải thích phương pháp tắt trường nhập bằng CSS.
Sự kết luận
Để tắt trường đầu vào trong HTML, hãy chọn “ sự kiện con trỏ ”Thuộc tính của CSS được sử dụng. Để làm như vậy, hãy thêm một trường đầu vào và đặt giá trị của sự kiện con trỏ là “ không ai ”Để tắt trường nhập. Trong hướng dẫn này, chúng tôi giải thích phương pháp tắt trường nhập bằng CSS và cung cấp ví dụ về nó.