Onkeypress and Onkeyup Event Handling in JavaScript

Introduction

This article explains the onkeyup and onkeypress events. The onkeyup and keypress events occur when keys are pressed or released; conversely, a keypress event represents a character being typed.

onkeyup event in JavaScript

The onkeyup event executes a JavaScript function when the user releases a key. The onkeyup method allows derived classes to handle the event without attaching the delegate. This is the preferred technique for handling the event in derived classes.

onkeypress event in JavaScript

The keypress event only fires for keys that have a printable representation. The onkeypress event is not fired for all keys; for example, for ALT, SHIFT, CTRL, ESC, and BACKSPACE in all browsers, this event is fired only when the user presses a key.

Difference between onkeyup and onkeypress

onkeypress is fired when a key on your keyboard is pressed.
onkeyup is fired when you release the key on your keyboard. If you press any key and do not release it.
onkeypress works for letters, numbers, and symbols without meta keys on your keyboard.
onkeyup works for all keys on your keyboard.

Step 1

Open Visual Studio, then select "Create New Website" --> "ASP.NET Empty Web Site".

Step 2

Now go to the Solution Explorer on the right side of the application and add a new item, as in the following figure.

NewItem

Step 3

Add a new web form to the application, as in the following figure.

WebForm

Step 4

Use the following code in the Default.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
   
<!DOCTYPE html>  
   
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title></title>  
<script type="text/javascript">  
    function movetoNext(CurrentFieldID, nextFieldID) {  
        if (CurrentFieldID.value.length >= CurrentFieldID.maxLength) {  
            document.getElementById(nextFieldID).focus();  
        }  
    }  
    function numbervalidate(key) {  
        var presskeys = (key.which) ? key.which : key.presskeys;  
        if (!(presskeys == 8 || presskeys == 46) && (presskeys < 48 || presskeys > 57)) {  
            return false;  
        }  
    }  
</script>  
</head>  
<body>  
<form runat="server">  
<asp:Label ID="lblmsg" runat="server" Text="Enter Your ATM Card Number :"></asp:Label>  
<asp:TextBox ID="firsttxtbox" onkeyup="movetoNext(this,'secondtxtbox')"   
onkeypress="return numbervalidate(event)"  
runat="server" MaxLength="4" Width="50"></asp:TextBox>  
 <asp:TextBox ID="secondtxtbox" onkeyup="movetoNext(this,'thirdtxtbox')"  
 onkeypress="return numbervalidate(event)"  
 runat="server" MaxLength="4" Width="50"></asp:TextBox>  
 <asp:TextBox ID="thirdtxtbox" onkeyup="movetoNext(this,'fourttxbox')"  
 onkeypress="return numbervalidate(event)"  
 runat="server" MaxLength="4" Width="50"></asp:TextBox>  
<asp:TextBox ID="fourttxbox"  runat="server" onkeypress="return numbervalidate(event)"  
 MaxLength="4" Width="50"></asp:TextBox>  
 </form>    
</body>  
</html>  
<script type="text/javascript">  
    function moveToNext(currenttxtbxid, nxttxtbxid) {  
        if (currenttxtbxid.value.length >= nxttxtbxid.value.maxLength) {  
            document.getElementById()  
        }  
    }  
</script>

Design View of Default.aspx page

Design

Step 5

Debug the application by pressing F5 to execute the Web form in the web browser. After debugging the application, the output will be as in the following figure,

Debugging

Step 6

Now enter the 16-digit card number in the given Textboxes. You cannot enter the characters in the Textboxes as in the following figure.

FirstBox

Step 7

The cursor moves to the next TextBox when the TextBoxes maximum length is occupied, as in the following figure.

SecondBox

Step 8

Now enter the digits in the given Third TextBox; the maximum length is 4, then the cursor will automatically move to the next TextBox as in the following figure.

ThirdBox

FourthBox

Summary

The onkeypress event sets and returns the onkeypress event handler code for the current element. The onkeypress event should be raised when the user presses a key on the keyboard; however, not all browsers fire keypress events for certain keys.