Show And Hide Password Using TypeScript

Last Updated : 04 Feb, 2025

Managing password visibility in web applications enhances user experience by allowing users to toggle between hidden and visible passwords. TypeScript provides strong type safety and better maintainability for implementing this feature.

What We Are Going to Create

We’ll build an application that allows users to:

Enter a password in an input field.
Toggle between showing and hiding the password.
Use a button to switch visibility.
Ensure the password remains secure while hidden.

Project Preview

Show And Hide Password- HTML and CSS Setup

This HTML code creates a simple password visibility toggle feature. It allows users to enter their password and toggle between showing and hiding it. This CSS code provides styling for the password input field and toggle button, ensuring a clean and modern look.

HTML

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h1 {
            font-size: 24px;
            color: #333;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        .input-container {
            position: relative;
            width: 100%;
        }
        input {
            width: 80%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding-right: 40px;
        }
        button {
            background: transparent;
            border: none;
            cursor: pointer;
            position: absolute;
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            padding: 0;
        }
        button:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Enter Password</h1>
        <form id="passwordForm">
            <div class="input-group">
                <div class="input-container">
                    <input type="password" id="password" placeholder="Enter your password" />
                    <button type="button" id="toggleVisibility" aria-label="Show Password">👁️</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

In this example

The container centers the form and applies styling for a clean and modern design.
The input field allows users to enter their password, with a placeholder for guidance.
The toggle button (👁️) lets users switch between showing and hiding the password.
The CSS provides styles for responsiveness, proper alignment, and a seamless user experience. It ensures the password field is well-structured, and the toggle button is positioned correctly within the input field.

Show And Hide Password - Typescript Logic

This TypeScript code handles the password visibility toggle. It switches the input field between text and password types when the user clicks the toggle button, ensuring a smooth and secure user experience.

JavaScript

const inp = document.getElementById('password') as HTMLInputElement | null;
const btn = document.getElementById('toggleVisibility') as HTMLButtonElement | null;

if (inp && btn) {
    btn.addEventListener('click', () => {
        if (inp.type === 'password') {
            inp.type = 'text';
            btn.textContent = '🙈';
        } else {
            inp.type = 'password';
            btn.textContent = '👁️';
        }
    });
}

In this example

The container centers the form with a modern design.
The input field allows password entry with a placeholder.
The toggle button (👁️) switches between showing and hiding the password.
CSS ensures responsiveness and proper alignment for usability.
The password input and toggle button are selected by IDs.
The event listener toggles the input type between text (show) and password (hide) with updated icons (🙈 / 👁️).

Convert to JavaScript File

Now You need to convert the TypeScript file into JavaScript to render by browser. Use one of the following command-

npx tsc task.ts
tsc task.ts

The command tsc task.ts compiles the calculator.ts TypeScript file into a task.js JavaScript file.
It places the output in the same directory as the input file by default.

Complete Code

HTML

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h1 {
            font-size: 24px;
            color: #333;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        .input-container {
            position: relative;
            width: 100%;
        }
        input {
            width: 80%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding-right: 40px;
        }
        button {
            background: transparent;
            border: none;
            cursor: pointer;
            position: absolute;
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            padding: 0;
        }
        button:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Enter Password</h1>
        <form id="passwordForm">
            <div class="input-group">
                <div class="input-container">
                    <input type="password" id="password" placeholder="Enter your password" />
                    <button type="button" id="toggleVisibility" aria-label="Show Password">
                        👁️
                    </button>
                </div>
            </div>
        </form>
    </div>
    <script>
        var inp = document.getElementById('password');
        var btn = document.getElementById('toggleVisibility');
        if (inp && btn) {
            btn.addEventListener('click', function () {
                if (inp.type === 'password') {
                    inp.type = 'text';
                    btn.textContent = '🙈';
                }
                else {
                    inp.type = 'password';
                    btn.textContent = '👁️';
                }
            });
        }
    </script>
</body>
</html>

How to use jQuery with TypeScript ?

sneha2dmo

Improve

Article Tags :