HOME > JavaScript > JavaScriptにてカラーコードのピッカーを実装できる「jscolor」の利用方法

JavaScriptにてカラーコードのピッカーを実装できる「jscolor」の利用方法

フォームのテキストボックスにカラーコードのピッカーを実装したかった。HTMLのみで実装する方法やjQueryプラグインで実装する方法を以前にメモしたが、今回はJavaScriptのみで実装したい。ライブラリを探したところ「jscolor」がシンプルで良さそう。以下にサンプルと実装方法をメモ。

サンプル

カラーコード選択後にsubmitボタンを押すと選択したカラーコードが表示される筈。

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.2/jscolor.min.js"></script>

異なるバージョンを利用したい場合は以下から探す。

ライブラリを読み込みテキストボックスに「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の「Flatpickr」ライブラリで時分のみ表示する方法

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリでカ ...

: PHPで配列を確認する際にvar_dumpよりも見やすくなるdBug.phpの利用方法

PHPで配列を確認する際、大抵var_dumpで出力させているがこれが見づらい。 ...

: JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法

文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...

: jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

: ローソク足のグラフをJavaScriptで描写する方法(highstock)

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...