jQuery の Color Picker プラグインで選択した色のカラーコードを、テキスト入力欄に出現させる方法。
逆に、テキスト入力欄にカラーコードを直接入力した場合、カラーピッカー上の色も、入力した色へ変化する。
実装例（サンプル）
実装例（サンプル）の動作について
テキスト入力欄をクリックすると、カラーピッカーが現れる。カラーピッカーで、色を選択し、
ボタンを押すと、選択した色のカラーコードが、テキスト入力欄に入力される。
テキスト入力欄に、カラーコードを直接入力した場合、カラーピッカー上の色も、入力した色へ変化する。
カラーピッカーを隠したいときは、テキスト入力欄と、カラーピッカー以外をクリック。
実装例（サンプル）のソースコード
読み込み
<link rel="stylesheet" media="screen" type="text/css" href="colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-colorpicker-field' ) . ColorPicker( {
onSubmit: function( hsb, hex, rgb, el ) {
jQuery( el ) . val( hex );
jQuery( el ) . ColorPickerHide();
},
onBeforeShow: function () {
jQuery( this ) . ColorPickerSetColor( this . value );
}
} );
jQuery( '#jquery-colorpicker-field' ) . bind( 'keyup', function() {
jQuery( this ) . ColorPickerSetColor( this . value );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-colorpicker-field' ) . ColorPicker( {
onSubmit: function( hsb, hex, rgb, el ) {
jQuery( el ) . val( hex );
jQuery( el ) . ColorPickerHide();
},
onBeforeShow: function () {
jQuery( this ) . ColorPickerSetColor( this . value );
}
} );
jQuery( '#jquery-colorpicker-field' ) . bind( 'keyup', function() {
jQuery( this ) . ColorPickerSetColor( this . value );
} );
} );
// -->
</script>
HTML
<input type="text" id="jquery-colorpicker-field" maxlength="6" size="6" value="ffff00">