.keyup()

In this chapter you will learn:

Syntax and Description for .keyup() event
How to listen to keyup event for input element
How to show the typed value for keyup event

Syntax and Description

.keyup(handler)             
.keyup()

handler is a function to execute each time the event is triggered. Return value is the jQuery object, for chaining purposes.

.keyup() event binds an event handler to the keyup JavaScript event, or trigger that event on an element.

.keyup(handler) is a shortcut for .bind('keyup', handler). .keyup() is a shortcut for .trigger('keyup').

We can trigger the event manually when another element is clicked.

$('#other').click(function() {

 $('#target').keyup();

});

keyup event for input element

The following code shows the key code for keyup event.

<html><!--from  j av  a  2  s  .c o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input").keyup(function (e) {
               if (e.which > 65 ) {
                 alert(e.which);
               }
            });
        });
    </script>
  </head>
  <body>
    <body>
     <input type="text" />
    </body>
</html>

Click to view the demo

Display the typed value

The following code listens to key up event and gets the typed value.

<html><!--from   j a v a 2  s  . c om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("input").keyup(function () {
             var value = $(this).val();
             $("div").text(value);
           }).keyup();
        });
    </script>
  </head>
  <body>
    <body>
      <input type="text" value="some text"/>
      <div></div>
  </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter: