Hide the Email Id in a form using HTML and JavaScript

Last Updated : 30 Sep, 2024

Hiding an email ID in a form using HTML and JavaScript involves obfuscating or masking the email address to enhance privacy or security. This can be achieved by partially hiding the email characters or storing the email in hidden fields until needed for processing.

Examples:

Input :[email protected] 
Output :robin*****@gmail.com

Input :[email protected]
Output :geeks*****@gmail.com

Approach :

Retrieve Email Input: The function test_str() retrieves the email entered by the user from the input field with id="t1".
Identify @ Position: The function uses indexOf('@') to determine the position of the @ symbol within the email string.
Mask Email: The characters before @ are partially replaced with asterisks using the replace() method and repeat() for masking.
Display Result: The masked email is shown in the readonly field with id="t2", keeping the protected part hidden from view.

Example: In this example we are following the above-explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>Hide the Email Id in a form using HTML and JavaScript</title>
    <script type="text/javascript">
        function test_str() {
            let str = document.getElementById("t1").value;
            let idx = str.indexOf('@');
            let res = str.replace(str.slice(5, idx), "*".repeat(5));
            document.getElementById("t2").value = res;
        }
    </script>
</head>

<body>
    <p>
        Email: <input type="text" 
                      placeholder="abc" 
                      id="t1" /><br />
        <input type="button" 
               value="Protect" 
               onclick="test_str()" /><br />
        Output: <input type="text" id="t2" readonly />
    </p>
</body>

</html>