jQuery「Spectrum」を使ってフォームの入力項目にカラーピッカーを設置

フォームの入力項目を作成した際に、テキストエリアとは別にカラーピッカーを設置する必要があった時に実装した「Spectrum」の使い方をメモ。

datepicker導入の手順

spectrum.jsを読み込む

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">

inputタグを設置し、spectrumを適応。

HTML

<input type="hidden" name="color" value="#f00">
<input type="text" id="colorpicker">

カラーピッカーの設置のみであれば「<input type=”text” id=”colorpicker”>」で可能だが、フォームを送信した際に値を取得できないため、「<input type=”hidden” name=”color”>」を使用し値を取得。
初期値の「value」は自由に変更可。

jQuery

<script>
var defcolor = $('input[name="color"]').val(); //初期値を取得
$("#colorpicker").spectrum({
	color: defcolor,
	showPalette: true,
	chooseText: "決定",
	change: function(color){
		setcolor = color.toHexString();
		$('input[name="color"]').val(setcolor);
	},
});
</script>

参考例はカラーパレット、初期値、色を変更した際のアクション、テキストをカラーピッカーに設定しているが、その他に色々と設定ができるようなので、詳しくは下記サイトを参照。

• Spectrumの使い方 (Webページにカラーピッカーを導入する)
• spectrum.jsで簡単にカラーピッカーを設置する

サンプル