JSP 點擊輸入框顯示刪除按鈕，切換焦點自動隱藏

需求描述

在 JSP 頁面實現：當使用者點擊（focus）某個文字輸入框時，在其右側顯示「刪除」按鈕；點擊其他輸入框或空白處失去焦點時，該按鈕自動消失。

核心思路

• 為所有需此行為的 <input> 綁定 focus 與 blur 事件。
• 焦點進入時，動態建立或顯示對應的刪除按鈕（可用绝對定位置於輸入框右側）。
• 焦點離開時，延遲一小段時間（如 150ms）再隱藏按鈕，給使用者點擊按鈕的機會。
• 按鈕點擊事件中清空對應輸入框值並隱藏自身。

關鍵代碼示例

$('.input-with-clear').on('focus', function() {
    var $btn = $(this).next('.clear-btn');
    if (!$btn.length) {
        $btn = $('×').insertAfter(this);
        $btn.on('click', function(e) {
            e.preventDefault();
            $(this).prev('input').val('').focus();
            $(this).hide();
        });
    }
    $btn.show();
}).on('blur', function() {
    var $btn = $(this).next('.clear-btn');
    setTimeout(function() { $btn.hide(); }, 150);
});

CSS 參考

.clear-btn {
    display: none;
    position: absolute;
    margin-left: -24px; /* 根據輸入框 padding 調整 */
    padding: 0 4px;
    cursor: pointer;
}

注意事項

• 若頁面動態新增輸入框，請使用事件委派 $(document).on('focus', '.input-with-clear', ...)。
• 行動裝置上 blur 觸發時機不同，建議搭配 touchend 處理。

樓主已自行解決，本文提供通用實作參考供後續開發者參考。