×

Chọn phần tử có giá trị trong khoảng - :in-range - trong CSS

Avatar of admin
admin 0 Views

Trong CSS, việc lựa chọn các phần tử có giá trị nằm trong một khoảng cụ thể không chỉ giúp cải thiện tính năng của trang web, mà còn nâng cao trải nghiệm người dùng. Đây là nơi mà pseudo-class :in-range phát huy vai trò quan trọng của mình. :in-range được sử dụng để áp dụng các quy tắc CSS cho các phần tử đầu vào (input) có giá trị nằm trong khoảng giới hạn hợp lệ. Điều này không chỉ đảm bảo rằng người dùng nhập dữ liệu chính xác, mà còn mang lại tương tác trực quan tức thì khi dữ liệu ngoài phạm vi hợp lệ.

Cách sử dụng :in-range

Để sử dụng :in-range, trước tiên bạn cần thiết lập các giới hạn cho một phần tử đầu vào trong HTML. Điều này thường được thực hiện thông qua các thuộc tính như min và max. Sau đó, sử dụng :in-range trong CSS giúp chỉ định các kiểu cho các phần tử có giá trị hợp lệ.

Ví dụ minh họa

Giả sử bạn có một input dạng số (number input) với giới hạn từ 1 đến 10. Đầu tiên, bạn sẽ thiết lập giới hạn cho phần tử input trong HTML như sau:

<input type="number" id="quantity" name="quantity" min="1" max="10">

Trong CSS, bạn có thể xác định các kiểu cụ thể cho các giá trị nằm trong khoảng từ 1 đến 10 sử dụng :in-range.

input:in-range {
  border: 2px solid green;
}

Với các thiết lập này, bất kỳ giá trị nào người dùng nhập vào từ 1 đến 10 sẽ làm cho đường viền của input chuyển sang màu xanh lục.

Tích hợp với JavaScript

Nếu bạn cần thêm kiểm tra hoặc hành động trực quan khác, bạn có thể tích hợp với JavaScript. JavaScript có thể được sử dụng để theo dõi sự thay đổi của giá trị nhập vào và cập nhật giao diện người dùng theo thời gian thực.

const inputElement = document.querySelector('#quantity');
inputElement.addEventListener('input', function() {
  if (inputElement.validity.rangeUnderflow || inputElement.validity.rangeOverflow) {
    inputElement.style.border = '2px solid red';
  } else {
    inputElement.style.border = '2px solid green';
  }
});

Lời khuyên khi sử dụng

  1. Kiểm tra hợp lệ: Sử dụng :in-range để cung cấp phản hồi trực quan khi người dùng nhập giá trị nằm trong khoảng hợp lệ. Điều này giúp người dùng dễ dàng nhận biết và điều chỉnh nếu xảy ra lỗi.

  2. Kết hợp với thuộc tính :out-of-range: Bên cạnh pseudo-class :in-range, bạn có thể kết hợp sử dụng :out-of-range để xử lý những giá trị nằm ngoài phạm vi xác định, điều này giúp tạo ra một giao diện người dùng thân thiện và an toàn hơn.

  3. Phản hồi trực quan: Cung cấp phản hồi tức thì bằng cách thay đổi màu sắc, đường viền hoặc các yếu tố trực quan khác để giúp người dùng biết được giá trị họ nhập có hợp lệ hay không.

Tổng kết

Pseudo-class :in-range là một công cụ mạnh mẽ trong CSS giúp kiểm soát và định dạng các giá trị trong phạm vi xác định cho các phần tử đầu vào. Sử dụng đúng cách, nó không chỉ tương tác tốt với người dùng mà còn góp phần nâng cao chất lượng và tính trực quan của trang web. Việc kết hợp với JavaScript càng làm tăng sức mạnh và tính linh hoạt của công nghệ này, từ đó tạo ra những trải nghiệm người dùng hấp dẫn và hiệu quả hơn.

Comments

Bài viết liên quan