.keyup()

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() {
/*from   w  ww  .j  av  a2 s .  c  o m*/
 $('#target').keyup();

});

keyup event for input element

The following code shows the key code for keyup event.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   w w w .ja v  a 2s . c  om-->
            $("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

The code above generates the following result.

Display the typed value

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


<!-- ww  w .j a  v a  2 s . c o m-->
<html>
  <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

The code above generates the following result.