Onkeypress and Onkeyup Event Handling in JavaScript

Pankaj Lohani
10y
17.9k
0
0

Article

Introduction

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

onkeyup event

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

The keypress event only fires for keys that have a printable reprsentation. 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.

Differecne 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 metakeys 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 to the right side of the application and add a new item as in the following figure.

NewItem

Step 3 :

Now 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>

<head>

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>

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

function moveToNext(currenttxtbxid, nxttxtbxid) {

if (currenttxtbxid.value.length >= nxttxtbxid.value.maxLength) {

document.getElementById()

}

</script>

Design View of Default.aspx page

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 and the onkeypress event should be raised when the user presses a key on the keyboard however not all browsers fire keypress events for the certain keys.

Up Next

Ebook Download

View all

Voice of a Developer: JavaScript From Scratch

Read by 3.8k people

Download Now!

Learn

View all