如何在不依赖第三方库的情况下使用JSF实现原生颜色输入组件？

好问题！其实不用依赖任何第三方库，咱们直接利用JSF标准组件的特性就能用上原生的HTML5 type="color" 输入控件，核心思路就是让JSF渲染出原生的颜色选择器元素。

方法1：直接给h:inputText指定type属性（JSF 2.0+） #

JSF 2.0及以后的版本支持直接给标准组件添加原生HTML属性，所以咱们可以直接用h:inputText，把它的type属性设为color，这样JSF就会渲染出<input type="color">元素。

示例代码如下：

<h:form>
    <!-- 颜色选择器，绑定后台Bean的selectedColor属性 -->
    <h:inputText id="colorPicker" type="color" value="#{colorBean.selectedColor}" />
    
    <h:commandButton value="确认选择" action="#{colorBean.handleColorSelection}" />
</h:form>

对应的后台Managed Bean写法：

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class ColorBean {
    // 存储选中的颜色值，格式为带#的十六进制字符串，比如#ff0000
    private String selectedColor;

    public String getSelectedColor() {
        return selectedColor;
    }

    public void setSelectedColor(String selectedColor) {
        this.selectedColor = selectedColor;
    }

    public void handleColorSelection() {
        // 这里可以处理选中的颜色，比如打印或存储
        System.out.println("用户选中的颜色：" + selectedColor);
    }
}

方法2：使用<f:passThroughAttribute>（兼容旧版JSF） #

如果你还在使用JSF 2.0之前的版本，或者遇到属性直接传递不生效的情况，可以用JSF的f:passThroughAttribute标签来显式传递type属性：

<h:form>
    <h:inputText id="colorPicker" value="#{colorBean.selectedColor}">
        <f:passThroughAttribute name="type" value="color" />
    </h:inputText>
    <h:commandButton value="确认选择" action="#{colorBean.handleColorSelection}" />
</h:form>

注意事项 #

• 浏览器兼容性：和你测试的原生HTML控件一样，这个方法依赖浏览器对HTML5 type="color"的支持，你提到的Firefox 52、Chromium 65、Opera 49都完全没问题。
• 值的格式：原生颜色选择器返回的是小写的十六进制颜色值（必须带#），所以后台用String类型接收即可，不需要额外的类型转换。
• 默认值设置：如果需要给颜色选择器设置默认值，直接在Bean里给selectedColor赋值即可，比如private String selectedColor = "#ffffff";，页面加载时就会显示对应的默认颜色。

内容的提问来源于stack exchange，提问作者Martin Höller