Struts2 聯動實現：JavaScript 控制雙輸入框同步更新

在 Struts2 頁面中，有兩個 <s:textfield>，需求：在第一個輸入框輸入數據時，第二個輸入框自動同步顯示相同內容。本文說明 Struts2 標簽渲染為普通 HTML <input> 後，如何用原生 JavaScript/jQuery 實現聯動，無需後端介入。

關鍵認知：Struts2 標簽最終輸出 HTML

<s:textfield name="field1" id="field1" />
<s:textfield name="field2" id="field2" />

渲染後約為：

<input type="text" name="field1" id="field1" />
<input type="text" name="field2" id="field2" />

結論：聯動純屬前端行為，通過 id 選中元素綁定事件即可，與 Struts2 無關。

原生 JavaScript 實現

<script>
document.addEventListener('DOMContentLoaded', function() {
    var src = document.getElementById('field1');
    var target = document.getElementById('field2');
    src.addEventListener('input', function() { // input 事件實時響應
        target.value = src.value;
    });
});
</script>

jQuery 實現（更簡潔）

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script>
$(function() {
    $('#field1').on('input', function() {
        $('#field2').val(this.value);
    });
});
</script>

進階場景：Select 下拉框聯動

若第二個是 <s:select>，需根據第一個輸入動態填充選項：

$('#field1').on('input', function() {
    var val = $(this).val();
    // 假設從後端 AJAX 獲取選項，或本地過濾
    var options = getOptionsByInput(val); // 返回 [{value:'v1',text:'t1'},...]
    var $sel = $('#field2').empty();
    $.each(options, function(i, opt) {
        $sel.append($('').val(opt.value).text(opt.text));
    });
});

注意事項

• 確保 id 屬性唯一且與 JS 選擇器一致。
• 優先使用 input 事件（支持中文輸入法組合、粘貼、拖拽），而非 keyup/change。
• 若需雙向綁定，雙方都綁定 input 並加防循環標記。

掌握「Struts2 標簽 = HTML 標簽」這一本質，前端交互問題迎刃而解。