HTML Color Picker Input
### Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker with Input Box</title>
<style>
.color-picker-container {
display: flex;
align-items: center;
gap: 10px;
}
.color-input {
padding: 5px;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="color-picker-container">
<!-- Color Picker -->
<input type="color" id="colorPicker" class="color-input">
<!-- Hex Input Box -->
<input type="text" id="colorCode" class="color-input" placeholder="#000000">
</div>
<script>
const colorPicker = document.getElementById('colorPicker');
const colorCode = document.getElementById('colorCode');
// Update text input when color picker changes
colorPicker.addEventListener('input', (event) => {
colorCode.value = event.target.value;
});
// Update color picker when text input changes
colorCode.addEventListener('input', (event) => {
const value = event.target.value;
if (/^#[0-9A-Fa-f]{6}$/.test(value)) { // Validate hex color code
colorPicker.value = value;
}
});
</script>
</body>
</html>### Features:
1. **Color Picker Input**: Lets you pick a color visually.
2. **Text Input**: Allows manual input of a hex color code (e.g., `#FF5733`).
3. **Synchronization**: Changes in one input reflect in the other.
### Notes:
– The `type="color"` input provides the browser's built-in color picker.
– The JavaScript ensures the two inputs are synchronized.
– Input validation ensures that only valid hex codes are accepted in the text box.
### Adjusted Code:
<div class="mb-3">
<label for="primaryColor" class="form-label">Primary Color</label>
<div class="d-flex align-items-center gap-2">
<!-- Color Picker -->
<input
type="color"
class="form-control form-control-color"
id="primaryColor"
name="primaryColor"
value="{{ old('primaryColor', '#000000') }}"
>
<!-- Text Input for Hex Code -->
<input
type="text"
class="form-control"
id="primaryColorText"
name="primaryColorText"
value="{{ old('primaryColor', '#000000') }}"
placeholder="#000000"
>
</div>
</div>
<script>
const colorPicker = document.getElementById('primaryColor');
const colorText = document.getElementById('primaryColorText');
// Synchronize text input when color picker changes
colorPicker.addEventListener('input', (event) => {
colorText.value = event.target.value;
});
// Synchronize color picker when text input changes
colorText.addEventListener('input', (event) => {
const value = event.target.value;
if (/^#[0-9A-Fa-f]{6}$/.test(value)) { // Validate hex color code
colorPicker.value = value;
}
});
</script>### Changes and Additions:
1. **Added a Text Input**:
– `id="primaryColorText"`
– To allow users to manually input a hex color code.
2. **Default Value**:
– Ensured `old('primaryColor', '#000000')` provides a fallback default value for both inputs.
3. **JavaScript Synchronization**:
– Updates the color picker when the text input changes and vice versa.
– Includes validation for proper hex color codes.
4. **Bootstrap Styling**:
– Used `form-control` class for consistency with Bootstrap forms.
5. **Accessibility and UX**:
– Label added for `primaryColor` for better form accessibility.
– Both inputs are visually aligned with `d-flex` and `gap-2` classes.