Open In App

Hide the Email Id in a form using HTML and JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

Here the following task is going to be formed with HTML code:
1.Input field: We are going to enter the email id in this field.
2.Button: On clicking this button hidden email id will be displayed.
3.Output field: Field to display hidden email id.

Examples:

Input :robin_singh@gmail.com 
Output :robin*****@gmail.com

Input :geeksforgeeks@gmail.com
Output :geeks*****@gmail.com

HTML code :




<!DOCTYPE html>
    <html>
      <head>
         <title></title>
         <script type="text/javascript">
            function test_str(){
               var str = document.getElementById("t1").value ;
               var idx = str.indexOf('@');
               var 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>


Output:


Last Updated : 23 Apr, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads