拾色器+ localStorage

Question

我正在使用此插件：Bootstrap Colorpicker 2.5.2

我的问题是：

• 如何在div中动态显示输入值
• 如何将该值保存到localStorage并在更改输入时动态更改它

我尝试了一些教程，但它不想继续工作

已解决！

Answer 1

HTML

        <div>
            <input type="text" id="picker" name="color">
        </div>

JS

$("#picker").minicolors({
    control: 'hue',
    format: 'hex',
    defaultValue: '',
    letterCase: 'lowercase',
    position: 'bottom left',
    theme: 'bootstrap'

}）;

有关更详细的用法，请参阅：https://labs.abeautifulsite.net/jquery-minicolors/index.html

Answer 2

颜色选择器documentation已完成。您只需阅读并尝试。

这是我为您制作的演示。我不得不提到，这是我第一次使用此选择器。几分钟后，我就在文档中找到了我所需的一切。

$(document).ready(function(){
  $("#color").colorpicker()
  
  // While selecting a color... This event fires multiple times.
  .on("changeColor",function(){
    var selectedColor = $(this).colorpicker('getValue');
    console.log(selectedColor);
    $("#colorDisplay").css("background",selectedColor);
  })
  
  // When the picker is closed, keep the chosen color.
  .on("hidePicker",function(){
    var selectedColor = $(this).colorpicker('getValue');
    console.log("User finally chose "+selectedColor);
    
    // Save it to localStorage.
    // -- But it does not work in SO snippet...
    //localStorage.setItem("selectedColor",selectedColor);
    
  });
});

#colorDisplay{
  height:6em;
  width: 6em;
}
.colorpicker{
  width:10em;
}
.colorpicker-color{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.2/css/bootstrap-colorpicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.2/js/bootstrap-colorpicker.min.js"></script>

<div id="colorDisplay"></div>
<input id="color">