Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Hide the Email Id in a form using HTML and JavaScript

  • Last Updated : 23 Apr, 2019

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!