Colorpicker + localStorage

Я использую этот плагин : Bootstrap Colorpicker 2.5.2

Мои вопросы:

  • Как динамически отображать значение ввода в div
  • Как сохранить это значение в localStorage и изменить его динамически при изменении ввода

Я пробовал несколько учебных пособий, но он не хочет продолжать работать

РЕШИТЬ!

jquery,html,local-storage,

0

Ответов: 2

1 принят

ColorPicker документация завершена. Вам просто нужно прочитать и попробовать.

Вот демо, которое я сделал для вас. Я должен упомянуть, что это первый раз, когда я использую этот сборщик. Я нашел все, что мне нужно в документации за считанные минуты.

$(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">

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.

JQuery, HTML, локальное хранение,
Похожие вопросы
Яндекс.Метрика