Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Manoj DegaManoj Dega 

SSN number format in Visualforce page using Jquery or Javascript

Hello,
SSN number format in Visualforce page using Jquery or Javascript to Mask all
characters with (XXX-XX-XXXX)

Can anyone help me on this?

Thank you.
Best Answer chosen by Manoj Dega
Gaurav Jain 7Gaurav Jain 7
Hi Manoj,

Please try below code:

Mark it as Best Answer, if it helps​ 
<apex:page standardStylesheets="false" doctype="html-5.0">
  <head lang="en">
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
     
  </head>
  <body>
      
      <apex:form >
          <apex:inputText id="output" html-placeholder="Click here"/>
      </apex:form>
      <script>
          $(document).ready(function(){
              $('[id$=output]').keyup(function(){
                 var val = this.value.replace(/\D/g, '');
          var newVal = '';
          if(val.length > 4) {
             this.value = val;
          }
          if((val.length > 3) && (val.length < 6)) {
             newVal += val.substr(0, 3) + '-';
             val = val.substr(3);
          }
          if (val.length > 5) {
             newVal += val.substr(0, 3) + '-';
             newVal += val.substr(3, 2) + '-';
             val = val.substr(5);
           }
           newVal += val;
           this.value = newVal.substring(0, 11);
        });

            
          });
      </script>
  </body>
</apex:page>

 

All Answers

Gaurav Jain 7Gaurav Jain 7
Hi Manoj,

Please try below code:

Mark it as Best Answer, if it helps​ 
<apex:page standardStylesheets="false" doctype="html-5.0">
  <head lang="en">
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
     
  </head>
  <body>
      
      <apex:form >
          <apex:inputText id="output" html-placeholder="Click here"/>
      </apex:form>
      <script>
          $(document).ready(function(){
              $('[id$=output]').keyup(function(){
                 var val = this.value.replace(/\D/g, '');
          var newVal = '';
          if(val.length > 4) {
             this.value = val;
          }
          if((val.length > 3) && (val.length < 6)) {
             newVal += val.substr(0, 3) + '-';
             val = val.substr(3);
          }
          if (val.length > 5) {
             newVal += val.substr(0, 3) + '-';
             newVal += val.substr(3, 2) + '-';
             val = val.substr(5);
           }
           newVal += val;
           this.value = newVal.substring(0, 11);
        });

            
          });
      </script>
  </body>
</apex:page>

 
This was selected as the best answer
Manoj DegaManoj Dega
Hi Gourav, Thanks for your reply, I want to mask all characters with XXX-XX-XXXX
Gaurav Jain 7Gaurav Jain 7
Hi Manoj,

I have added two static resources  and below the line in the code:

download  jMaskedInput.js and jQuery 3.2.1.js and create as a static resource.

apex:includeScript value="{!$Resource.jquery}"/> <apex:includeScript value="{!$Resource.jMaskedInput}"/>

$('[id$=output]').mask("999-99-9999");

check this updated code:
  
<apex:page standardStylesheets="false" doctype="html-5.0">
  <head lang="en">
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
     
 <apex:includeScript value="{!$Resource.jquery}"/>
<apex:includeScript value="{!$Resource.jMaskedInput}"/>

  </head>
  <body>
      
      <apex:form >
          <apex:inputText id="output" html-placeholder="Click here"/>
          
      </apex:form>
      <script>
          $(document).ready(function(){
             
              $('[id$=output]').mask("999-99-9999");    
              $('[id$=output]').keyup(function(){
                 var val = this.value.replace(/\D/g, '');
          var newVal = '';
          if(val.length > 4) {
             this.value = val;
          }
          if((val.length > 3) && (val.length < 6)) {
             newVal += val.substr(0, 3) + '-';
             val = val.substr(3);
          }
          if (val.length > 5) {
             newVal += val.substr(0, 3) + '-';
             newVal += val.substr(3, 2) + '-';
             val = val.substr(5);
           }
           newVal += val;
           this.value = newVal.substring(0, 11);
          
        });
        
            
          });
      </script>
  </body>
</apex:page>
Mark it as Best Answer, if it helps