Struts2 綁定鼠標事件：JavaScript 實現懸浮輸入框交互

需求：在 Struts2 <s:textfield> 上綁定鼠標事件，滑入時下方顯示可輸入框，輸入數字後滑出自動填回原框並隱藏。本文說明 Struts2 標簽渲染為普通 HTML 後，純前端 JS 實現方案。

核心認知

<s:textfield> 輸出 <input type="text" id="xxx" />。所有交互均屬前端範疇，Struts2 僅負責數據綁定，**不處理任何客戶端事件**。

完整交互邏輯

<script>
$(function() {
    var $main = $('#mainField');      // 主輸入框
    var $float = $('#floatField');    // 懸浮輸入框（初始隱藏）

    // 1. 鼠標進入主框 → 顯示懸浮框並定位
    $main.on('mouseenter', function() {
        var pos = $main.offset();
        $float.css({
            top: pos.top + $main.outerHeight(),
            left: pos.left,
            display: 'block'
        }).focus();
    });

    // 2. 懸浮框失去焦點/鼠標離開區域 → 隱藏並同步數值
    $float.on('blur', function() {
        $main.val($float.val()); // 同步回主框
        $float.hide();
    });

    // 3. 防止鼠標在主框與懸浮框間移動觸發閃爍
    var hideTimer;
    $main.add($float).on('mouseleave', function(e) {
        // 簡易判斷：若移向對方則不隱藏
        if ($(e.relatedTarget).closest($main.add($float)).length) return;
        hideTimer = setTimeout(function() { $float.hide(); }, 200);
    }).on('mouseenter', function() { clearTimeout(hideTimer); });
});
</script>

HTML 結構

<s:textfield id="mainField" name="mainField" />
<input type="text" id="floatField" style="display:none; position:absolute; z-index:1000;" />

關鍵點總結

• 用 mouseenter/mouseleave 而非 mouseover/mouseout（後者冒泡導致頻繁觸發）。
• 懸浮框用 position:absolute 通過 JS 計算位置，或用 CSS 相對定位配合 Flex/Grid 布局。
• 數值同步在 blur 事件，確保用戶輸入完成。
• 若涉及表單提交，確保 name 屬性在主框上，懸浮框無需 name。

掌握「Struts2 標簽 = HTML」本質，任何複雜前端交互均可用成熟 JS/jQuery/Vue/React 方案實現，勿嘗試在標簽層面硬綁邏輯。