输入类型颜色默认颜色输入为HEX

Question

我正在编写一个具有输入类型颜色的表单。当您单击它时，您会看到一个颜色选择器和默认颜色的 RGB 值。我想知道是否有办法将十六进制颜色设置为默认颜色。 如this示例所示。默认情况下，它看起来像图像的左侧部分，我希望它像图像的右侧部分一样。我不知道这是否可能。谢谢你:)

Answer 1

颜色选择器由浏览器按原样提供，下拉列表的显示方式与浏览器定义的相同。

虽然有办法改变它的一些外观，但你不能随心所欲地深入。 另请注意，您所看到的是 chrome 如何显示颜色选择器，其他浏览器的显示方式完全不同，如果您在 Firefox 或 Safari 中打开它，则会有所不同。如果您想更深入地了解该主题，我发现this文章非常深入。

但是，如果您想要更加自定义的用户体验，您可以搜索 javascript 颜色选择器库并找到最适合您需求的库，甚至为其编写自定义实现。

Answer 2

默认拾色器无法将十六进制设置为默认值。您可以更好地使用这个库，它有多种类型的颜色选择器可以满足您的需求。

https://casesandberg.github.io/react-color/

Answer 3

你可以在下面编码

                        <div class="row">
                        <!-- Color Picker for Background Color -->
                        <div class="col-md-6 form-group">
                            <label class="form-control-label">Color<span class="text-danger">&nbsp;*</span></label>
                            <input type="color" class="form-control @error('color') is-invalid @enderror"
                                id="color_input" name="color" value="{{ old('color', '#ffffff') }}" required>
                            <small class="form-text text-muted">Selected Color: <span
                                    id="color_hex_display">#ffffff</span></small>
                            @error('color')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <!-- Color Picker for Font Color -->
                        <div class="col-md-6 form-group">
                            <label class="form-control-label">Font Color<span
                                    class="text-danger">&nbsp;*</span></label>
                            <input type="color" class="form-control @error('font_color') is-invalid @enderror"
                                id="font_color_input" name="font_color" value="{{ old('font_color', '#000000') }}"
                                required>
                            <small class="form-text text-muted">Selected Font Color: <span
                                    id="font_color_hex_display">#000000</span></small>
                            @error('font_color')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            // Get the color inputs and display spans
                            const colorInput = document.getElementById('color_input');
                            const colorHexDisplay = document.getElementById('color_hex_display');
                            const fontColorInput = document.getElementById('font_color_input');
                            const fontColorHexDisplay = document.getElementById('font_color_hex_display');

                            // Update hex display when the color changes
                            function updateHexDisplay(input, display) {
                                display.textContent = input.value; // Always display the current value in hex
                            }

                            // Event listeners for real-time updates
                            colorInput.addEventListener('input', function() {
                                updateHexDisplay(colorInput, colorHexDisplay);
                            });

                            fontColorInput.addEventListener('input', function() {
                                updateHexDisplay(fontColorInput, fontColorHexDisplay);
                            });

                            // Initialize display with current values
                            updateHexDisplay(colorInput, colorHexDisplay);
                            updateHexDisplay(fontColorInput, fontColorHexDisplay);
                        });
                    </script>