How to change the masking character of a password field? | Sololearn: Learn to code for FREE!
¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita
+ 2

How to change the masking character of a password field?

Is it possible to change the masking character of a password input field in HTML from its default value . (bullet) to something else like * (asterisk), # (hash), x etc.? I guess it will involve JS but not sure how to go about it. Any suggestions/solutions would be much appreciated.

27th Feb 2024, 3:10 PM
Tharun Chandramohan
Tharun Chandramohan - avatar
10 Respuestas
29th Feb 2024, 10:20 PM
IAmSupreme
IAmSupreme - avatar
+ 2
IAmSupreme great that's working! Thanks a lot 👍
1st Mar 2024, 2:48 AM
Tharun Chandramohan
Tharun Chandramohan - avatar
+ 1
KnightBits I used your same code you gave above 👆
28th Feb 2024, 3:00 AM
Tharun Chandramohan
Tharun Chandramohan - avatar
+ 1
KnightBits alright I'll try that, thanks again 👍
28th Feb 2024, 12:16 PM
Tharun Chandramohan
Tharun Chandramohan - avatar
+ 1
Tharun Chandramohan you're welcome
2nd Mar 2024, 5:57 PM
IAmSupreme
IAmSupreme - avatar
0
Yes, you can change the masking character of a password input field using JavaScript. Here's a simple example using HTML and JavaScript: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Password Masking Example</title> </head> <body> <label for="password">Password:</label> <input type="password" id="password" oninput="maskPassword(this.value)"> <script> function maskPassword(value) { // Choose your desired masking character (e.g., '*') const maskingCharacter = '*'; // Replace each character in the input with the chosen masking character const maskedValue = maskingCharacter.repeat(value.length); // Set the masked value back to the input field document.getElementById('password').value = maskedValue; } </script> </body> </html>
27th Feb 2024, 6:41 PM
Knight
Knight - avatar
0
@KnightBits I tried the same code you gave but it still comes in ... and not ***. Did it work for you?
27th Feb 2024, 7:14 PM
Tharun Chandramohan
Tharun Chandramohan - avatar
0
Did i can see ur code?
27th Feb 2024, 8:40 PM
Knight
Knight - avatar
0
Lol. Try this at another ide. I recommended u VSCode. There you can track errors and applied styles to elements through the chrome developer tool
28th Feb 2024, 12:07 PM
Knight
Knight - avatar
0
Hggc
28th Feb 2024, 11:55 PM
محمد الجلال
محمد الجلال - avatar