Sling Academy
Home/TypeScript/TypeScript: Handling HTML onkeyup event

TypeScript: Handling HTML onkeyup event

Last updated: January 08, 2024

Overview

TypeScript enhances JavaScript by adding types to the language. This tutorial illustrates handling the HTML onkeyup event using TypeScript, facilitating more robust and error-checked interactivity in web applications.

Prerequisites

Before we dive into the onkeyup event, ensure you have a basic understanding of HTML, TypeScript, and the DOM (Document Object Model). You should also have Node.js and npm installed to set up the TypeScript compiler.

Setting up the TypeScript Environment

First, let’s create a simple HTML file with a text input and set up TypeScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript onkeyup Event</title>
</head>
<body>
    <input type="text" id="textInput" onkeyup="handleKeyUp(event)" />
    <script src="app.js"></script>
</body>
</html>

To compile TypeScript, create a ‘tsconfig.json’ file and run ‘tsc --init‘ in your terminal. Next, write the TypeScript function in ‘app.ts’ and compile it to ‘app.js’ using the ‘tsc‘ command.

Basic Event Handling in TypeScript

To handle the onkeyup event, declare a function that receives a KeyboardEvent:

function handleKeyUp(event: KeyboardEvent): void {
    console.log(`Key pressed: ${event.key}`);
}

This logs the pressed key every time the user releases it.

Improving with Types and Interfaces

To avoid runtime errors, TypeScript allows us to define types and interfaces. Create an interface to type the input element:

interface InputElement {
    value: string;
}

function handleKeyUp(event: KeyboardEvent): void {
    const input = event.target as InputElement;
    console.log(`Input value: ${input.value}`);
}

This ensures that we’re working with the expected properties of the input element.

Using Advanced Functions

If our application becomes more complex, we can encapsulate logic within a class:

class InputHandler {
    public inputElement: HTMLElement;

    constructor(elementId: string) {
        this.inputElement = document.getElementById(elementId) as HTMLElement;
        this.inputElement.onkeyup = this.handleKeyUp.bind(this);
    }

    handleKeyUp(event: KeyboardEvent): void {
        const input = event.target as HTMLInputElement;
        console.log(`Input value: ${input.value}`);
    }
}

const inputHandler = new InputHandler('textInput');

We bind handleKeyUp to make sure this refers to the InputHandler instance.

Throttling User Input

When dealing with input events, it’s efficient to throttle the number of times the event handler is called. We can use lodash’s _.throttle function to implement this:

import _ from 'lodash';

class InputHandler {
    // ...
    private throttledHandleKeyUp: (event: KeyboardEvent) => void;

    constructor(elementId: string) {
        // ...
        this.throttledHandleKeyUp = _.throttle(this.handleKeyUp, 200);
        this.inputElement.onkeyup = this.throttledHandleKeyUp.bind(this);
    }

    // Implement handleKeyUp normally
}

This throttles keyboard input handling to a max of once every 200 milliseconds.

Dealing with Asynchronous Operations

The onkeyup event can trigger asynchronous operations. To handle this, we can use async/await:

class InputHandler {
    // ...
    async handleKeyUp(event: KeyboardEvent): Promise<void> {
        const input = event.target as HTMLInputElement;
        await this.someAsyncOperation(input.value);
        console.log('Async operation finished');
    }

    private async someAsyncOperation(inputValue: string): Promise<any> {
        // Perform async operation
    }
}

Remember to catch potential errors when dealing with promises.

Error Handling

TypeScript’s type system can’t catch all errors, especially runtime ones. Ensure proper error handling:

class InputHandler {
    // ...
    handleKeyUp(event: KeyboardEvent): void {
        try {
            const input = event.target as HTMLInputElement;
            // Process the input
        } catch(error: unknown) {
            console.error('An error occurred:', error);
        }
    }
}

Conclusion

This tutorial covered basic to advanced techniques for handling the HTML onkeyup event using TypeScript. From simple logging to throttling and async operations, TypeScript’s static types and features help ensure our code is robust and maintainable.

Next Article: TypeScript error: Cannot find name ‘window’ or ‘document’

Series: TypeScript: Intermediate & Advanced Tutorials

TypeScript

You May Also Like

  • TypeScript: setInterval() and clearInterval() methods (3 examples)
  • TypeScript sessionStorage: CRUD example
  • Using setTimeout() method with TypeScript (practical examples)
  • Working with window.navigator object in TypeScript
  • TypeScript: Scrolling to a specific location
  • How to resize the current window in TypeScript
  • TypeScript: Checking if an element is a descendant of another element
  • TypeScript: Get the first/last child node of an element
  • TypeScript window.getComputerStyle() method (with examples)
  • Using element.classList.toggle() method in TypeScript (with examples)
  • TypeScript element.classList.remove() method (with examples)
  • TypeScript: Adding Multiple Classes to An Element
  • element.insertAdjacentHTML() method in TypeScript
  • TypeScript – element.innerHTML and element.textContent
  • Using element.removeAttribute() method in TypeScript
  • Working with Document.createElement() in TypeScript
  • Using getElementById() method in TypeScript
  • Using Window prompt() method with TypeScript
  • TypeScript – window.performance.measure() method (with examples)