JavaScriptのシンプルなカラーピッカー「JSColor」

カラーピッカーは、古くなっているものが多く、開発ツールのコーンソールを見ると動くんですけれどエラーを発生しているものもあります。

この「JSColor」は、現時点でそういったエラーは発生していないです。

JSColorの特徴

例えばテキストボックスをクリックすると、下の画像にあるカラーピッカーが表示され、そこから色を選択するとテキストボックスにカラーコードが挿入されるシンプルな仕様になっています。

また、JavaScriptなどプログラムを書かずに表示することができます。

jscolor1

JSColorの設定方法

JSColorサイトからファイルをダウンロードします。
ダウンロードサイト:JSColor

適当な場所で解凍したあと、作成されたフォルダを任意の場所に配置したあと、script要素のsrcにjscolor.jsファイルまでのパスを設定します。

<script type="text/javascript" src="jscolor/jscolor.js"></script>

次に、カラーピッカーを表示するためのタグをhtmlに挿入すると表示されるようになります。。下のコードはシンプルなコードですが、value=”#aaaaaa”など初期値として値を設定できます。

<input type="text" class="color" />

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です