colorpickerの色選択後にinputへ反映させたい

Question

https://simonwep.github.io/pickr/

こちらのcolorpickerを使用させていただいているのですが
選択し保存した色をinputへ画像のように反映させたいのですが
どうすればよいでしょうか？

Answer 1

ドキュメントにサンプルへのリンクがあり、ご希望の動作をしていると思います。

Pickr fiddle template - JSFiddle

コメントを受けて追記

こんな感じでしょうか？
https://jsfiddle.net/Lhankor_Mhy/yjdtch9n/

<section class="container">
 <input type="text" name="test" id="test1" value="#000">
 <input type="text" name="test" id="test2" value="#8BC34AD9">
 <input type="text" name="test" id="test2" value="red">
 <input type="text" name="test" id="test2" value="brown">
 <input type="text" name="test" id="test3" value="white">
</section>

const container = document.querySelectorAll('.container>input').forEach( el => {

  const pickr = new Pickr({
    el,
    useAsButton: true,
    default: '#42445A',
    theme: 'classic',

    swatches: [
      'rgba(244, 67, 54, 1)',
      'rgba(233, 30, 99, 0.95)',
      'rgba(156, 39, 176, 0.9)',
      'rgba(103, 58, 183, 0.85)',
      'rgba(63, 81, 181, 0.8)',
      'rgba(33, 150, 243, 0.75)',
      'rgba(3, 169, 244, 0.7)',
      'rgba(0, 188, 212, 0.7)',
      'rgba(0, 150, 136, 0.75)',
      'rgba(76, 175, 80, 0.8)',
      'rgba(139, 195, 74, 0.85)',
      'rgba(205, 220, 57, 0.9)',
      'rgba(255, 235, 59, 0.95)',
      'rgba(255, 193, 7, 1)'
    ],

    components: {
      preview: true,
      opacity: true,
      hue: true,

      interaction: {
        hex: true,
        rgba: true,
        hsva: true,
        input: true,
        clear: true,
        save: true
      }
    }
  }).on('init', pickr => {
    pickr.setColor(el.value);
    el.style.backgroundColor = el.value;
    el.style.color = blackOrWhite( pickr.getColor().toRGBA() );
    
  }).on('save', color => {
    el.value = color.toHEXA().toString(0);
    el.style.backgroundColor = el.value;
    el.style.color = blackOrWhite( color.toRGBA() );
    pickr.hide();
  });

});
function blackOrWhite ( [r, g, b] ) {
// via. https://lab.syncer.jp/Web/JavaScript/Snippet/55/
	return ( ( ( (r * 299) + (g * 587) + (b * 114) ) / 1000 ) < 128 ) ? "white" : "black" ;
}

Comments

[退会済みユーザー]

解決しました
ありがとうございました！

[退会済みユーザー]

https://jsfiddle.net/Simonwep/wL1zyqcd/
フォームで使用することはできましたが、ひとつのページに複数同じようにフォームを配置させたいのですが

https://jsfiddle.net/Simonwep/9ghk71c3/
こちらの方法でフォーム入力での追加は可能なのでしょうか？

[Lhankor_Mhy]

ちょっと試してみました。
https://jsfiddle.net/Lhankor_Mhy/cfaben3s/

[退会済みユーザー]

ありがとうございます！想定通りになりました

https://jsfiddle.net/k9rqpmfe/

リンク先のようにひとつずつ配置し、value="<?php echo $txt_datas["backcolor"];?>">のように各Input のvalueとカラーを設置できるようにしたいのですが可能なのでしょうか？

[Lhankor_Mhy]

回答に追記しました。
なんとなく、興が乗ったので余計な機能をつけてみました。

[退会済みユーザー]

ご丁寧にありがとうございます！素晴らしいです
望んでいたものができましたので大変感謝致します。
最後までありがとうございました！