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でWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

: JavaScriptライブラリChart.jsでグラフの描写する方法

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...

: JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...

: JavaScriptの「Day.js」ライブラリで日付の比較を行う方法

JavaScriptの日時・時刻用ライブラリ「Day.js」を用いて日付の比較を ...

: JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法

以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...