w3.unpo<code>todo

Input type color

Un elemento input de tipo color ( <input type="color"> ) permite especificar un color en formato hexadecimal.

El aspecto del elemento puede variar considerablemente entre navegadores, desde un simple input (como los de texto) hasta sofisticadas ruedas cromáticas.

Igualmente a otros tipos de input, en JavaScript podemos utilizar los eventos input y change para recuperar el valor del color seleccionado.

El evento input  se dispara "sobre la marcha" cada vez que el valor del color cambia. A diferencia del evento input, el evento change no se dispara tan a menudo. Esto es muy evidente en el caso de los <input type="range"> o "text" pero en el caso de los <input type ="color"> no hay mucha diferencia.

En el siguiente ejemplo tengo un elemento <canvas> en el cual hay dibujado un rectángulo rojo. Para cambiar el valor del rectángulo voy a utilizar un <input type = "color">

Al cargarse la ventana llamo una primera función inicializar() que:

• - guarda una referencia al input type="color" en una variable (input_color)
• - define el valor predeterminado del input type="color"
• - dibuja el rectángulo en el canvas
• - aplica addEventListener al input_color para detectar al cambio de color y actualizar el relleno del rectángulo dibujado en el canvas.
• - al final se recomienda utilizar el método select() para seleccionar el contenido de texto del input en navegadores muy antiguos donde podría ser implementado como cuadro de texto. Utilizar el método select() en navegadores modernos no tendrá ningún efecto.

canvas {
  border: 1px solid;
}
div {
  text-align: center;
  width: 300px;
  padding: 1em;
}

  Color: 
  

:(

var canvas = document.getElementById("miCanvas");
var ctx = canvas.getContext("2d");
var el_color = "#ff0000";
ctx.fillStyle = el_color;


function dibujarRectangulo(){
  ctx.beginPath();
  ctx.fillRect(10, 10, 280, 180);
}


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

function inicializar() {
  //guarda una referencia al input type="color" en una variable
  input_color = document.querySelector("[type='color']");
  //define el valor predeterminado del input type="color"
  input_color.value = el_color;
  dibujarRectangulo();
  input_color.addEventListener("input", actualizar, false);
  //input_color.addEventListener("change", actualizar, false);
  input_color.select();
}


function actualizar(event) {
  // detecta el nuevo color 
  el_color = event.target.value;
  // actualiza el relleno del rectángulo
  ctx.fillStyle = el_color;
  // y lo vuelve a dibujar en el canvas
  dibujarRectangulo();
  }

Vea este ejemplo en codepen:

See the Pen Input type color*** by Gabi (@enxaneta) on CodePen.