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にて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)

JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...

: JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法

JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...

: Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...

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

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

: jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...