JavaScriptにてカラーコードのピッカーを実装できる「jscolor」の利用方法
フォームのテキストボックスにカラーコードのピッカーを実装したかった。HTMLのみで実装する方法やjQueryプラグインで実装する方法を以前にメモしたが、今回はJavaScriptのみで実装したい。ライブラリを探したところ「jscolor」がシンプルで良さそう。以下にサンプルと実装方法をメモ。
サンプル
https://taitan916.info/sample/jscolor/
カラーコード選択後にsubmitボタンを押すと選択したカラーコードが表示される筈。
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.2/jscolor.min.js"></script>
異なるバージョンを利用したい場合は以下から探す。
https://cdnjs.com/libraries/jscolor
使用方法
ライブラリを読み込みテキストボックスに「data-jscolor="{}"」を設定すること。
尚、初期選択カラーを指定したい場合はvalue属性で指定すればOK。
<input name="color" data-jscolor="{}"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.2/jscolor.min.js"></script>
関連記事
-
-
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法
サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...
-
-
JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法
JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...
-
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
-
JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法
文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...