jQuery — Key Events and Select Element by Type

Photo by Florian Berger on Unsplash

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.keypress()

We can use the keypress method to listen to keypress events or trigger it.

For example, if we have:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there">
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the keypress event on the input by writing:

$("#target").keypress(function() {
  console.log("Handler for .keypress() called.");
});

We can also trigger the keypress event when we click on the div with ID other by writing:

$("#target").keypress(function() {
  console.log("Handler for .keypress() called.");
});
$("#other").click(function() {
  $("#target").keypress();
});

.keyup()

The .keyup() method lets us listen to the keyup event or trigger it.

For instance, if we have:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there">
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>