Question 179047 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – catch the input event when a value is entered

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    I think you can use an input event for that

    $('#inputEmail').on('input', function () {
    console.log('input');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search