Show And Hide Password Using TypeScript
Last Updated :
04 Feb, 2025
Improve
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>
<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>
73
1
<html>2
<head>3
<style>4
body {5
font-family: Arial, sans-serif;6
background-color: #f9f9f9;7
display: flex;8
justify-content: center;9
align-items: center;10
height: 100vh;11
margin: 0;12
}13
.container {14
text-align: center;15
background: #fff;16
padding: 20px;17
border-radius: 8px;18
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);19
width: 300px;20
}21
h1 {22
font-size: 24px;23
color: #333;24
}25
.input-group {26
display: flex;27
flex-direction: column;28
align-items: center;29
justify-content: center;30
width: 100%;31
}32
.input-container {33
position: relative;34
width: 100%;35
}36
input {37
width: 80%;38
padding: 10px;39
font-size: 16px;40
border: 1px solid #ccc;41
border-radius: 4px;42
padding-right: 40px;43
}44
button {45
background: transparent;46
border: none;47
cursor: pointer;48
position: absolute;49
right: 35px;50
top: 50%;51
transform: translateY(-50%);52
font-size: 18px;53
padding: 0;54
}55
button:focus {56
outline: none;57
}58
</style>59
</head>60
<body>61
<div class="container">62
<h1>Enter Password</h1>63
<form id="passwordForm">64
<div class="input-group">65
<div class="input-container">66
<input type="password" id="password" placeholder="Enter your password" />67
<button type="button" id="toggleVisibility" aria-label="Show Password"></button>68
</div>69
</div>70
</form>71
</div>72
</body>73
</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.
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>
<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>
91
1
<html>2
<head>3
<style>4
body {5
font-family: Arial, sans-serif;6
background-color: #f9f9f9;7
display: flex;8
justify-content: center;9
align-items: center;10
height: 100vh;11
margin: 0;12
}13
.container {14
text-align: center;15
background: #fff;16
padding: 20px;17
border-radius: 8px;18
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);19
width: 300px;20
}21
h1 {22
font-size: 24px;23
color: #333;24
}25
.input-group {26
display: flex;27
flex-direction: column;28
align-items: center;29
justify-content: center;30
width: 100%;31
}32
.input-container {33
position: relative;34
width: 100%;35
}36
input {37
width: 80%;38
padding: 10px;39
font-size: 16px;40
border: 1px solid #ccc;41
border-radius: 4px;42
padding-right: 40px;43
}44
button {45
background: transparent;46
border: none;47
cursor: pointer;48
position: absolute;49
right: 35px;50
top: 50%;51
transform: translateY(-50%);52
font-size: 18px;53
padding: 0;54
}55
button:focus {56
outline: none;57
}58
</style>59
</head>60
<body>61
<div class="container">62
<h1>Enter Password</h1>63
<form id="passwordForm">64
<div class="input-group">65
<div class="input-container">66
<input type="password" id="password" placeholder="Enter your password" />67
<button type="button" id="toggleVisibility" aria-label="Show Password">68
69
</button>70
</div>71
</div>72
</form>73
</div>74
<script>75
var inp = document.getElementById('password');76
var btn = document.getElementById('toggleVisibility');77
if (inp && btn) {78
btn.addEventListener('click', function () {79
if (inp.type === 'password') {80
inp.type = 'text';81
btn.textContent = '';82
}83
else {84
inp.type = 'password';85
btn.textContent = '';86
}87
});88
}89
</script>90
</body>91
</html>
