jQuery bind 綁定輸入框焦點與失焦事件獲取時間戳完整示例

需求實現

通過 ID 選擇文本框，用 `bind` (jQuery 1.7+) / `on` (推薦) 綁定 `focus` 和 `blur` 事件，輸出當前時間戳。

代碼示例

<input type="text" id="myInput" />

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script>
$(function() {
    $("#myInput").on({
        focus: function() {
            console.log("獲取焦點:", new Date().toISOString());
            // 或 alert(new Date()); // 演示用
        },
        blur: function() {
            console.log("失去焦點:", new Date().toISOString());
        }
    });
});
</script>

關鍵點說明

• `$(function(){...})` 等同 `$(document).ready()`，確保 DOM 就緒。
• `on` 方法接受對象映射，同時綁定多事件，代碼更整潔。
• `new Date()` 返回當前日期時間對象，`toISOString()` 格式化為標準字符串。
• 若需傳遞數據：`on({focus: function(e){ console.log(e.data); }, data: {custom: "value"}})`。< /li>

原生 JS 替代方案 (無依賴)

document.getElementById('myInput').addEventListener('focus', () => console.log('focus', new Date()));
document.getElementById('myInput').addEventListener('blur', () => console.log('blur', new Date()));