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の動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...
-
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
-
HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル
あるサイトのHTMLタグ内に「hx-〇〇」という見慣れないタグが記述されていた。 ...
-
-
JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法
JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...