如何在JavaScript中获取输入框的点击及输入后的失焦事件？

问题 #

我有一个邮箱输入框，需要在JavaScript中为该输入框监听两个事件：第一个是点击输入框时触发的click事件，第二个是输入内容后切换到页面其他元素，输入框失去焦点时的事件。目前click事件的实现已明确，请问如何实现第二个事件？

解决方案 #

要实现输入框失去焦点时的事件监听，你需要使用blur事件——这个事件会在元素失去焦点（比如点击页面其他区域、切换到其他输入框）时触发。结合你现有的jQuery代码，只需在原有基础上添加blur事件的监听逻辑即可：

完整代码示例 #

JavaScript 代码

$('#inputEmail').on('click', function () {
    console.log('click');
}).on('blur', function () {
    console.log('输入框已失去焦点');
    // 这里可以添加你需要的业务逻辑，比如验证邮箱格式、保存输入内容等
});

CSS 代码

#inputEmail {
  margin: 50px;
}

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<form action="#">
    <div class="form-group row">
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email">
        </div>
    </div>
</form>

如果使用原生JavaScript而非jQuery，对应的写法是：

const inputEmail = document.getElementById('inputEmail');
inputEmail.addEventListener('click', () => {
    console.log('click');
});
inputEmail.addEventListener('blur', () => {
    console.log('输入框已失去焦点');
});

内容的提问来源于stack exchange，提问作者Hector