{"id":6763,"date":"2022-03-12T10:10:25","date_gmt":"2022-03-12T16:10:25","guid":{"rendered":"https:\/\/justinparrtech.com\/JustinParr-Tech\/?p=6763"},"modified":"2023-09-17T13:36:23","modified_gmt":"2023-09-17T18:36:23","slug":"did-you-know-most-browsers-have-a-built-in-color-picker","status":"publish","type":"post","link":"https:\/\/justinparrtech.com\/JustinParr-Tech\/did-you-know-most-browsers-have-a-built-in-color-picker\/","title":{"rendered":"Did You Know &#8211; Most Browsers Have a Built-in Color Picker?"},"content":{"rendered":"<h1>Did You Know &#8211; Most Browsers Have a Built-in Color Picker?<\/h1>\n<p>Well, I didn&#8217;t (<em>If you said &#8216;no&#8217; then response.write &#8220;either&#8221;<\/em>) !<\/p>\n<table>\n<tbody>\n<tr>\n<td>Here is an example that uses JavaScript to keep a color picker and a text input in sync with each other:<\/p>\n<pre>&lt;script&gt;\r\n  function sync(s,t) {\r\n    var a=document.getElementById(s);\r\n    var b=document.getElementById(t);\r\n    if (a.value!=b.value) b.value=a.value;\r\n  }\r\n&lt;\/script&gt;\r\n<span style=\"color: #00ff00;\">&lt;input id=\"PickColor\" type=\"COLOR\" value=\"#207cff\" onchange=\"sync('PickColor','HexColor');\" \/&gt;<\/span>\r\n&lt;input id=\"HexColor\" type=\"TEXT\" value=\"#207cff\" onchange=\"sync('HexColor','PickColor');\" \/&gt;<\/pre>\n<\/td>\n<td><iframe src=\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/colorpicker.html\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span>&nbsp;<\/p>\n<p><\/iframe><\/td>\n<\/tr>\n<tr>\n<td>Here is the Color picker without the JavaScript:<\/p>\n<pre>&lt;input name=\"WebColor\" type=\"COLOR\" value=\"#207cff\" \/&gt;<\/pre>\n<p>If you add this to a form, when the user submits the form, one of the form fields will be &#8220;WebColor&#8221;.<\/td>\n<td><input id=\"PickColor\" type=\"COLOR\" value=\"#207cff\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did You Know &#8211; Most Browsers Have a Built-in Color Picker? Well, I didn&#8217;t (If you said &#8216;no&#8217; then response.write &#8220;either&#8221;) ! Here is an example that uses JavaScript to keep a color picker and a text input in sync with each other: &lt;script&gt; function sync(s,t) { var a=document.getElementById(s); var b=document.getElementById(t); if (a.value!=b.value) b.value=a.value; } [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6763","post","type-post","status-publish","format-aside","hentry","category-other-stuff","post_format-post-format-aside"],"_links":{"self":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/6763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/comments?post=6763"}],"version-history":[{"count":10,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/6763\/revisions"}],"predecessor-version":[{"id":7425,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/6763\/revisions\/7425"}],"wp:attachment":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/media?parent=6763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/categories?post=6763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/tags?post=6763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}