No puedo activar el evento de cambio del elemento de color de entrada sin hacer clic en otro lugar. Estoy codificando un selector de color. Cuando hago clic con el botón derecho y selecciono la sección de mi complemento en el menú contextual, obtengo una entrada de color. Sin embargo, después de elegir un color, la entrada no se cierra. Tengo que hacer clic en alguna parte. He estado buscando durante horas, pero no puedo encontrar una manera de apagar la entrada tan pronto como se selecciona el color.

¿Cómo cerrar un selector de color html5?

También he examinado los métodos en el enlace de arriba en detalle. Sin embargo, no está funcionando correctamente. También miré algunas bibliotecas de selección de colores, pero no pude encontrar una biblioteca donde pueda seleccionar los colores en la página. Mi objetivo es cerrar la entrada de color y cambiar el valor cuando el usuario selecciona un color.

 var items = document.querySelector('.zfccolorv1'); items.addEventListener('change', () => { document.querySelectorAll('.color-zfc-panel').forEach(es => { es.remove() }); var hex = items.value console.log(hex) items.type='color' var z = document.createElement('div'); z.classList.add('color-zfc-panel'); z.classList.add('color-zfc-panel-a'); document.body.appendChild(z); })

 .color-zfc-panel{ position:fixed; bottom: -100%; left: -100%; background-color: red; width: 100%; height: 70px; } .color-zfc-panel-a{ bottom: 0; left: 0; }

 <input type="color" class="zfccolorv1">

Mi objetivo es cambiar el valor de la entrada de color en el fragmento anterior sin hacer clic en ningún lado. No puedo hacer que aparezca el cuadro rojo tan pronto como se selecciona el color. He revisado todos los hilos anteriores. Sin embargo, estaba escrito que no había solución. No importa lo que use. Estoy tratando de crear una aplicación que pueda darme el código de color tan pronto como haga clic en el color de la página. Gracias de antemano por tu ayuda.