I have an input field, let’s say for an email
I need to get two events from this field in javascript
The first is click events when I click on that field. The second is when I have already entered a value and released this field by going to another element on the page
With the click event, everything is clear, but how can I get the second event after the input?
$('#inputEmail').on('click', function () {
console.log('click');
});#inputEmail {
margin: 50px;
}<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>>Solution :
Your title and question are a little unclear. Do you want to catch the input event, the lost focus event, or both?
Look at catching input and blur.
$('#inputEmail').on('click', function () {
console.log('clicked');
})
$('#inputEmail').on('input', function () {
console.log('input changes');
});
$('#inputEmail').on('blur', function () {
console.log('left element');
});#inputEmail {
margin: 50px;
}<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>