输入框里面的字符串拼接到另外一个页面的一个输入框

四个输入框里面的字符串拼接到另外一个页面的一个输入框，随着四个输入框里面的内容更改
另外一个页面的输入框也跟着更新，需要怎么实现？

这是我的四个输入框

<td class="right">
                    <logic:notEqual name="displayInd" value="view">
                        <input type="text" name="CountryCode" class="codecode"
                            maxlength="3" style="width: 34%"
                            value="<bean:write name="modifyPersonaClient" property="countryCode" ignore="true" />"
                            ondblclick="code_CodeSelect(this,'countryCode','0,1','Y','');chooseOne();cleaniOrganizeCode();checkfont();selectFlag();"
                            onkeyup="code_CodeSelect(this,'countryCode','0,1','Y','');chooseOne();cleaniOrganizeCode();checkfont();selectFlag();"
                            onchange="code_CodeChange(this,'countryCode','0,1','Y','');chooseOne();cleaniOrganizeCode();checkfont();selectFlag();">
                        <input type="text" class="codename" style="width: 55%"
                            value="<app:translateCode name="modifyPersonaClient" property="countryCode" codeType="CountryCode" filter="true"/>">
                    </logic:notEqual>
                    <logic:equal name="displayInd" value="view">
                        <input type="text" name="CountryCode" class="common"
                            style="width: 34%" readonly
                            value="<bean:write name="modifyPersonaClient" property="countryCode" ignore="true" />">
                        <input type="text" class="common" style="width: 55%" readonly
                            value="<app:translateCode name="modifyPersonaClient" property="countryCode" codeType="CountryCode" filter="true"/>">
                    </logic:equal>
                </td>
                <td class="left">
                    <bean:message key="GsClientCorporateDto.regionCode" />
                </td>
                <td class="right">
                    <logic:notEqual name="displayInd" value="view">
                        <input type="text" name="RegionCode" class="codecode"
                            style="width: 34%"
                            value="<bean:write name="modifyPersonaClient" property="regionCode" ignore="true" />"
                            ondblclick="code_CodeSelect(this,'countryCode','0,1','Y','upperAreaCode='+fm.CountryCode.value+',areaLevel=2');chooseOne();"
                            onkeyup="code_CodeSelect(this,'countryCode','0,1','Y','upperAreaCode='+fm.CountryCode.value+',areaLevel=2');chooseOne();"
                            onchange="code_CodeChange(this,'countryCode','0,1','Y','upperAreaCode='+fm.CountryCode.value+',areaLevel=2');chooseOne();">
                        <input type="text" class="codename" style="width: 55%"
                            value='<app:translateCode name="modifyPersonaClient" property="regionCode" codeType="CountryCode" arg2="2" filter="true"/>'>
                    </logic:notEqual>
                    <logic:equal name="displayInd" value="view">
                        <input type="text" name="RegionCode" class="common"
                            style="width: 34%" readonly
                            value="<bean:write name="modifyPersonaClient" property="regionCode" ignore="true" />">
                        <input type="text" class="common" style="width: 55%" readonly
                            value='<app:translateCode name="modifyPersonaClient" property="regionCode" codeType="CountryCode" arg2="2" filter="true"/>'>
                    </logic:equal>
                </td>
            </tr>
            <tr>
                <td class="left">
                    <bean:message key="GsClientCorporateDto.area" />
                    <logic:notEqual name="displayInd" value="view">&nbsp;<font
                            color="red">*</font>
                    </logic:notEqual>
                </td>
                <td class="right">
                    <logic:notEqual name="displayInd" value="view">
                        <input type="text" name="Area" class="codecode" style="width: 34%"
                            value="<bean:write name="modifyPersonaClient" property="area" ignore="true" />"
                            ondblclick="javascript:if (cityDblClick('code_CodeSelect',this,'RegionCode',3)){code_CodeSelect(this,'countryCode','0,1','Y','upperAreaCode='+fm.RegionCode.value+',areaLevel=3');}"
                            onkeyup="javascript:if (cityDblClick('code_CodeSelect',this,'RegionCode',3)){code_CodeSelect(this,'countryCode','0,1','Y','upperAreaCode='+fm.RegionCode.value+',areaLevel=3');}"
                            onchange="javascript:if (cityDblClick('code_CodeChange',this,'RegionCode',3)){code_CodeChange(this,'countryCode','0,1','Y','upperAreaCode='+fm.RegionCode.value+',areaLevel=3');}">
                        <input type="text" class="codename" style="width: 55%"
                            value='<app:translateCode name="modifyPersonaClient" property="area" codeType="CountryCode" arg2="3" arg3="${modifyPersonaClient.regionCode }" filter="true"/>'>
                    </logic:notEqual>
                    <logic:equal name="displayInd" value="view">
                        <input type="text" name="Area" class="common" style="width: 34%"
                            readonly
                            value="<bean:write name="modifyPersonaClient" property="area" ignore="true" />">
                        <input type="text" class="common" style="width: 55%" readonly
                            value='<app:translateCode name="modifyPersonaClient" property="area" codeType="CountryCode"  arg2="3" arg3="${modifyPersonaClient.regionCode }" filter="true"/>'>
                    </logic:equal>
                </td>
                <!-- ClientDistrict -->
                <td class="left">
                    <bean:message key="GsClientCorporateDto.clientDistrict" />
                </td>
                <td class="right">
                    <logic:notEqual name="displayInd" value="view">
                        <input type="text" name="ClientDistrict" class="codecode" style="width: 34%"
                            value="<bean:write name="modifyPersonaClient" property="clientDistrict" ignore="true" />"
                            ondblclick="javascript:if (cityDblClick('code_CodeSelect',this,'Area',4)){code_CodeSelect(this,'countryCode','0,1','Y','upperAreaCode='+fm.Area.value+',areaLevel=4');}"
                            onkeyup="javascript:if (cityDblClick('code_CodeSelect',this,'Area',4)){code_CodeSelect(this,'countryCode','0,1','Y','upperAreaCode='+fm.Area.value+',areaLevel=4');}"
                            onchange="javascript:if (cityDblClick('code_CodeChange',this,'Area',4)){code_CodeChange(this,'countryCode','0,1','Y','upperAreaCode='+fm.Area.value+',areaLevel=4');}">
                        <input type="text" class="codename" style="width: 55%"
                            value='<app:translateCode name="modifyPersonaClient" property="clientDistrict" codeType="CountryCode" arg2="4" arg3="${modifyPersonaClient.area }" filter="true"/>'>
                    </logic:notEqual>
                    <logic:equal name="displayInd" value="view">
                        <input type="text" name="ClientDistrict" class="common" style="width: 34%"
                            readonly
                            value="<bean:write name="modifyPersonaClient" property="clientDistrict" ignore="true" />">
                        <input type="text" class="common" style="width: 55%" readonly
                            value='<app:translateCode name="modifyPersonaClient" property="clientDistrict" codeType="CountryCode"  arg2="4" arg3="${modifyPersonaClient.area }" filter="true"/>'>
                    </logic:equal>
                </td

这是我另外一个页面的输入框：

 <td class="left">
                <bean:message key="GsClientCorporate.companyRegisteredAddress" />
            </td>
            <td class="right">
            <logic:notEqual name="displayInd" value="view">
                <input type="text" name="CompanyRegisteredAddress" class="common" maxlength="2000" style="width: 250px;resize:none"
                    value="<bean:write name="modifyPersonaClient" property="companyRegisteredAddress" ignore="true" />"> 
                      </logic:notEqual>
                     <logic:equal name="displayInd" value="view">
                     <input type="text" name="CompanyRegisteredAddress" class="common" maxlength="2000" style="width: 250px;resize:none" readonly
                    value="<bean:write name="modifyPersonaClient" property="companyRegisteredAddress" ignore="true" />" >
                      </logic:equal>
            </td>

vue虚拟dom可以实现你这个功能。原生js，如果让我来写，我可能会把里面的东东存放在浏览器的local stronge里面，然后操作一下，应该已经成功

用的什么组件