Cómo seleccionar dinámicamente el valor predeterminado de un <input type="color">
En HTML y JavaScript, el elemento <input type="color"> permite seleccionar colores. Para establecer un valor predeterminado dinámicamente, podemos modificar su atributo value mediante JavaScript.
Ejemplo básico
Podemos asignar un valor predeterminado al input con JavaScript:
<input type="color" id="colorPicker">
<button onclick="setDefaultColor()">Restablecer color</button>
<script>
function setDefaultColor() {
let colorInput = document.getElementById("colorPicker");
colorInput.value = "#ff5733"; // Establece el color predeterminado dinámicamente
}
</script>Explicación:
-
Se obtiene la referencia del
<input type="color">. -
Se cambia su valor (
value) con un color en formato hexadecimal. - Al hacer clic en el botón, el color del input se actualizará.
Ejemplo con carga dinámica al iniciar la página
Si deseas que el input tenga un color predeterminado al cargar la página:
<input type="color" id="colorPicker">
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("colorPicker").value = "#3498db"; // Color azul predeterminado
});
</script>Ejemplo obteniendo el color desde una variable o almacenamiento local
Si necesitas que el color predeterminado se guarde y se cargue dinámicamente (por ejemplo, desde localStorage):
<input type="color" id="colorPicker">
<script>
document.addEventListener("DOMContentLoaded", function() {
let savedColor = localStorage.getItem("selectedColor") || "#ff0000"; // Rojo si no hay color guardado
document.getElementById("colorPicker").value = savedColor;
});
document.getElementById("colorPicker").addEventListener("input", function() {
localStorage.setItem("selectedColor", this.value); // Guarda el color seleccionado
});
</script>
Jorge García
Fullstack developer