Như tôi đã nêu trong bài đăng của tôi Bộ chọn ngày HTML5, Opera 11 đi trước một số trình duyệt web không phải beta khác trong việc triển khai một số thẻ HTML5 dự kiến. Trong bài đăng này, tôi xem xét việc triển khai “bộ chọn màu” HTML5 của Opera như một minh họa về những gì có thể xảy ra khi các trình duyệt khác bắt đầu thêm các triển khai của riêng chúng. Tôi sử dụng mã HTML đơn giản sau để trình diễn bộ chọn màu của Opera 11.

Bạn đang xem : công cụ chọn màu trong html5

Như tôi đã nêu trong bài đăng của mình Công cụ chọn ngày HTML5 , Opera 11 đi trước một số trình duyệt web không phải beta khác trong việc triển khai một số thẻ HTML5 dự kiến. Trong bài đăng này, tôi xem việc triển khai “bộ chọn màu” HTML5 của Opera như một minh họa về những gì có thể xảy ra khi các trình duyệt khác bắt đầu thêm các triển khai của riêng chúng.

Tôi sử dụng mã HTML đơn giản sau để trình bày Opera Bộ chọn màu của 11.

ColorPicker.html

  & lt; html lang = "en" & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" / & gt;
  & lt; title & gt; Công cụ chọn màu HTML5 được chứng minh & lt; / title & gt;
  & lt; script language = "javascript" & gt;
  function newBackgroundColor (màu)
  {
     document.bgColor = color;
     document.colorForm.selectedcolor.value = color;
  }
  & lt; / script & gt;
& lt; / head & gt;
& lt; body bgcolor = "white" & gt;
& lt; tiêu đề & gt;
  & lt; h1 & gt; Công cụ chọn màu HTML 5 được trình diễn & lt; / h1 & gt;
& lt; / tiêu đề & gt;
& lt; form name = "colorForm" & gt;
   & lt; p & gt; Chọn Màu Nền
   & lt; input name = "colorpicker" type = "color" onchange = "newBackgroundColor (colorpicker.value);" & gt;
   & lt; / p & gt;
   & lt; p & gt;
   Màu đã chọn
   & lt; input name = "selectcolor" type = "text" & gt;
   & lt; / p & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Không có nhiều mã ở trên cho công cụ chọn màu (chỉ & lt; input type = "color" & gt; với thuộc tính “name” và ” sự kiện onchange “để làm cho mọi thứ thú vị hơn một chút). Trước khi chứng minh mã này hoạt động trên năm trình duyệt chính, tôi sẽ chỉ ra rằng mã hoạt động trên tất cả các trình duyệt. Điều khác biệt giữa cách xử lý của Opera với các trình duyệt khác là Opera cung cấp một điều khiển trang nhã để cho phép người dùng chọn màu hoặc nhập mã của màu. Các trình duyệt khác (phiên bản không phải beta) không cung cấp khả năng kiểm soát tốt tại thời điểm này, nhưng mã vẫn hoạt động trong chúng nếu người dùng nhập chuỗi màu được nhận dạng.

Xem Thêm  Xóa tất cả các khoảng trắng khỏi một chuỗi trong SQL Server - sql xóa khoảng trắng ở cuối chuỗi

Bộ chọn màu của Opera 11

Bộ ảnh chụp nhanh màn hình tiếp theo thể hiện cách xử lý của Opera đối với bộ chọn màu. Các hình ảnh cho thấy rằng một tập hợp nhỏ màu được hiển thị trước tiên để lựa chọn và người dùng có thể chọn từ một tập hợp màu lớn hơn hoặc thậm chí chỉ định một màu tùy chỉnh. Mã JavaScript đơn giản được gọi khi một màu được chọn và màu nền được thay đổi theo đó.

< / p>

< strong> “Bộ chọn màu” của Firefox 3.6

Firefox 3.6 không hỗ trợ bộ chọn màu cũng như Opera 11. Thật vậy, nó được trình bày dưới dạng một trường văn bản đơn giản. Tin tốt là nếu người dùng nhập Chuỗi có thể được hiểu là mã màu hợp lệ, chức năng vẫn hoạt động thích hợp. Điều này được thể hiện trong bộ ảnh chụp nhanh màn hình tiếp theo.

“Bộ chọn màu” của Chrome 8

“Hỗ trợ bộ chọn màu” của Chrome 8 rất giống với Firefox 3.6 như được minh họa trong ba hình ảnh tiếp theo.

< img border = "0" class = "lazy" height = "138" width = "320" />

“Công cụ chọn màu” của Safari 5

Safari 5 cung cấp cùng mức độ hỗ trợ cho công cụ chọn màu như Chrome 8 và Firefox 3.6.

Hỗ trợ “Bộ chọn màu” của Internet Explorer 8

Hỗ trợ của Internet Explorer 8 tương tự như tất cả các trình duyệt được đề cập trước đó ngoài Opera 11.

Xem Thêm  [Top 5] Nơi Học Java Core Tốt Nhất, Miễn Phí năm 2021

Kết luận

Như với bộ chọn ngày / giờ , Opera 11 dẫn đầu nhóm các trình duyệt web không phải beta về triển khai bộ chọn màu và do đó cung cấp minh họa tốt nhất về những gì thẻ này có thể trở thành. Cũng như công cụ chọn ngày, tôi mong chờ ngày chúng tôi có một công cụ chọn màu trang nhã hoạt động trên tất cả các trình duyệt chính và được sử dụng thông qua đánh dấu HTML đơn giản. Ngày nay, để có được điều này, chúng tôi cần sử dụng thứ gì đó bên ngoài HTML tiêu chuẩn, chẳng hạn như Flex hoặc công cụ chọn màu được cung cấp bởi thư viện JavaScript bên thứ ba .

Câu chuyện này, “Công cụ chọn màu HTML5” ban đầu được xuất bản bởi

JavaWorld .


Xem thêm những thông tin liên quan đến chủ đề công cụ chọn màu trong html5

HTML5 Color Picker Tutorial

alt

  • Tác giả: Imbibe Digital
  • Ngày đăng: 2020-08-11
  • Đánh giá: 4 ⭐ ( 1904 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video, you’ll learn how to implement the HTML5 Color Picker Input element and use a little JavaScript magic to change the color of an HTML element.
    ___________________________________________________

    Project source files and demo can be found here: https://imbibedigital.co/tutorial-html5-input-color-picker/

One moment, please…

  • Tác giả: www.chili.vn
  • Đánh giá: 3 ⭐ ( 5050 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

31 Công Cụ Color Picker Online

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 3150 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hôm nay mình sẽ giới thiệu đến bạn danh sách các tool lấy mã màu cho phát triển website.

7 công cụ để nhận mã màu HTML đang được sử dụng trên màn hình

  • Tác giả: vi.p-and-d.com
  • Đánh giá: 5 ⭐ ( 7369 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cho dù bạn đang cố gắng để có được màu sắc phù hợp cho trang web của mình hoặc yêu cầu một giá trị màu chính xác trong chương trình hoặc hình ảnh vì bạn muốn sử dụng nó, đây là một lựa chọn 7 công cụ chọn màu hoàn toàn miễn phí để giúp bạn hoàn thành nhiệm vụ.

Microsoft Edge Addons

  • Tác giả: microsoftedge.microsoft.com
  • Đánh giá: 3 ⭐ ( 1064 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Make Microsoft Edge your own with extensions that help you personalize the browser and be more productive.

👍 Bộ chọn màu trực tuyến

  • Tác giả: imagecolorpicker.com
  • Đánh giá: 4 ⭐ ( 1090 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Color Picker:Công cụ chọn màu: Với công cụ trực tuyến này, bạn có thể tải lên hình ảnh hoặc cung cấp URL trang web và nhận mã Màu RGB, Màu HEX và Màu HSL. 👍

Màu sắc trong HTML

  • Tác giả: xuanthulab.net
  • Đánh giá: 5 ⭐ ( 7069 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Quy tắc màu sắc trong HTML, mã màu sắc CSS và HTML, sử dụng các màu sắc trong văn bản HTML thuần túy, công cụ chọn màu sắc và các mã màu dùng trong CSS và HTML

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách chọn hàng từ bảng trong SQL - máy chủ sql chọn một hàng

By ads_php