标签：get   this   eal   cal   tps   word   tor   depend   def   

<input type="color">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

JavaScript

First, there‘s some setup. Here we establish some variables, setting up a variable that contains the color we‘ll set the color well to when we first load up, and then setting up a load handler to do the main startup work once the page is fully loaded.

var colorWell;
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Initialization

Once the page is loaded, our load event handler, startup(), is called:

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

This gets a reference to the color <input> element in a variable called colorWell, then sets the color input‘s value to the value in defaultColor. Then the color input‘s input event is set up to call our updateFirst() function, and the change event is set to call updateAll(). These are both seen below.

Finally, we call select() to select the text content of the color input if the control is implemented as a text field (this has no effect if a color picker interface is provided instead).

使用JQuery

 /*color*/
    $(‘[type=color]‘).on(‘change‘, function () {
        var block = $(this).parents(‘.blockquote‘);
        block.find(‘.br-ccc‘).css(‘background-color‘, $(this).val());
        block.find(‘[type=text]‘).val($(this).val());        
    });

 $(‘#nav-page-styling [name]‘).each(function () {
            var value = page.model.Page[$(this).attr(‘name‘)];
            $(this).val(value);
            $(this).parents(‘.blockquote‘).find(‘.br-ccc‘).css(‘background-color‘, $(this).val());
        });

input type color

标签：get   this   eal   cal   tps   word   tor   depend   def   

原文地址：https://www.cnblogs.com/chucklu/p/11769683.html