PrimeFaces输入框改造需求：拆分单掩码输入为三框并合并存储

要把单个9.9.999掩码的<p:inputMask>拆分为三个独立输入框，并在保存时合并成X.X.XXX格式存储，需要前端页面配合后端Bean处理，具体实现如下：

1. 后端Bean（SystemConfigView）新增临时属性与逻辑 #

在你的SystemConfigView类中添加三个临时属性绑定拆分后的输入框，同时实现初始化拆分已有版本号和保存时合并版本号的逻辑：

import javax.annotation.PostConstruct;

public class SystemConfigView {
    // 原有属性：假设forceupgradeVersion是封装了value的实体类
    private ConfigItem forceupgradeVersion;

    // 新增临时属性，绑定三个拆分输入框
    private String val1;
    private String val2;
    private String val3;

    // 页面初始化时拆分已有版本号，实现回显
    @PostConstruct
    public void initVersionSplit() {
        if (forceupgradeVersion != null && forceupgradeVersion.getValue() != null) {
            String version = forceupgradeVersion.getValue();
            String[] versionParts = version.split("\\.");
            // 校验格式合法性，避免拆分出错
            if (versionParts.length == 3) {
                val1 = versionParts[0];
                val2 = versionParts[1];
                val3 = versionParts[2];
            }
        }
    }

    // 保存时合并三个输入框的值
    public void saveForceUpgradeVersion() {
        // 校验输入格式（可选，确保符合1位、1位、3位数字的要求）
        if (val1 != null && val2 != null && val3 != null
            && val1.length() == 1 && val2.length() == 1 && val3.length() == 3) {
            String mergedVersion = val1 + "." + val2 + "." + val3;
            forceupgradeVersion.setValue(mergedVersion);
            // 此处调用你的持久化逻辑，比如保存到数据库
        }
    }

    // 以下是getter/setter方法
    public ConfigItem getForceupgradeVersion() { return forceupgradeVersion; }
    public void setForceupgradeVersion(ConfigItem forceupgradeVersion) { this.forceupgradeVersion = forceupgradeVersion; }
    public String getVal1() { return val1; }
    public void setVal1(String val1) { this.val1 = val1; }
    public String getVal2() { return val2; }
    public void setVal2(String val2) { this.val2 = val2; }
    public String getVal3() { return val3; }
    public void setVal3(String val3) { this.val3 = val3; }
}

2. 前端页面调整 #

替换原有单个输入框为三个独立的<p:inputMask>，绑定到后端新增的临时属性，并添加保存按钮触发合并逻辑：

<p:outputLabel value="Force Upgrade Version: " />
<!-- 拆分后的三个输入框，掩码分别限制输入长度 -->
<p:inputMask id="val1" value="#{systemConfigView.val1}" styleClass="input-mid" mask="9" maxlength="1" />
<span>.</span>
<p:inputMask id="val2" value="#{systemConfigView.val2}" styleClass="input-mid" mask="9" maxlength="1" />
<span>.</span>
<p:inputMask id="val3" value="#{systemConfigView.val3}" styleClass="input-mid" mask="999" maxlength="3" />

<!-- 保存按钮，调用后端合并逻辑并更新表单 -->
<p:commandButton value="Save" action="#{systemConfigView.saveForceUpgradeVersion}" update="@form" />

关键细节说明 #

• 掩码与长度控制：每个输入框的mask确保只能输入数字，maxlength限制输入位数，避免不符合要求的内容。
• 初始化回显：通过@PostConstruct注解的方法，在页面加载时自动拆分已有版本号，填充到对应输入框。
• 保存校验：合并前校验输入的合法性，避免生成格式错误的版本字符串。

内容的提问来源于stack exchange，提问作者A.R. Faustine Tangente