Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 340
  • Last Modified:

input box mask help

Hi

can anyone help me with the following input box mask.  currently the mask works if the user types in a date.  it should not allow them to click any button other then number keys.  i dont want a message to popup if they click a button other then a number key, it should just do nothing.

<html>
      <head>
            <script language="javascript">
                  function mask(str,textbox,loc,delim){
                  var locs = loc.split(',');

                  for (var i = 0; i <= locs.length; i++){
                        for (var k = 0; k <= str.length; k++){
                        if (k == locs[i]){
                        if (str.substring(k, k+1) != delim){
                              str = str.substring(0,k) + delim + str.substring(k,str.length)
                        }
                        }
                        }
                  }
                  textbox.value = str
                  }
            </script>
            <title>Input Mask : : Javascript</title>
      </head>
      <body>
            <form name="form" action="" method="post">
                  <table>
                        <tr>
                              <td>Field1:</td>
                              <td><input name="Field1" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'3,6','-');" onBlur="javascript:return mask(this.value,this,'3,6','-');" style="font-family:verdana;font-size:10pt;width:110px;" maxlength="11"></td>
                        </tr>
                        <tr>
                              <td>Field2:</td>
                              <td><input name="Field2" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'2,5','/');" onBlur="javascript:return mask(this.value,this,'2,5','/');" style="font-family:verdana;font-size:10pt;width:110px;" maxlength="10"></td>
                        </tr>
                        <tr>
                              <td>Field3:</td>
                              <td><input name="Field3" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'2,5','-');" onBlur="javascript:return mask(this.value,this,'2,5','-');" style="font-family:verdana;font-size:10pt;width:110px;" maxlength="10"></td>
                        </tr>
                        <tr>
                              <td colspan="2">
                                    <input type="submit" value="submit">
                              </td>
                        </tr>
                  </table>
            </form>
      </body>
</html>

but this does not stop the user from entering characters.  it should only allow them to enter numbers.  and also it needs leave a space after the date and then allow them to enter the time e.g. dd/mm/yy hh:mm

anyone got any ideas?

thanks
0
narmi2
Asked:
narmi2
  • 2
  • 2
4 Solutions
 
BatalfCommented:
Do you need anything else than this simple function?


<html>
     <head>
          <script language="javascript">
               function mask(str,textbox,loc,delim){
                   str = str.replace(/[^\d\/\s:]/,'');
                   textbox.value = str

               }
          </script>
          <title>Input Mask : : Javascript</title>
     </head>
     <body>
          <form name="form" action="" method="post">
               <table>
                    <tr>
                         <td>Field1:</td>
                         <td><input name="Field1" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'3,6','-');" onBlur="javascript:return mask(this.value,this,'3,6','-');" style="font-family:verdana;font-size:10pt;width:110px;" maxlength="11"></td>
                    </tr>
                    <tr>
                         <td>Field2:</td>
                         <td><input name="Field2" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'2,5','/');" onBlur="javascript:return mask(this.value,this,'2,5','/');" style="font-family:verdana;font-size:10pt;width:110px;" maxlength="10"></td>
                    </tr>
                    <tr>
                         <td>Field3:</td>
                         <td><input name="Field3" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'2,5','-');" onBlur="javascript:return mask(this.value,this,'2,5','-');" style="font-family:verdana;font-size:10pt;width:110px;" maxlength="10"></td>
                    </tr>
                    <tr>
                         <td colspan="2">
                              <input type="submit" value="submit">
                         </td>
                    </tr>
               </table>
          </form>
     </body>
</html>
0
 
BatalfCommented:
Another option is this function:


               function mask(str,textbox,loc,delim){
               
               var locs = loc.split(',');
                str = str.replace(/[^\d\/\s:\-]/,'');
               for (var i = 0; i <= locs.length; i++){
                    for (var k = 0; k <= str.length; k++){
                    if (k == locs[i]){
                    if (str.substring(k, k+1) != delim){
                         str = str.substring(0,k) + delim + str.substring(k,str.length)
                    }
                    }
                    }
               }
                   
                   textbox.value = str
               }
0
 
ZvonkoSystems architectCommented:
Check this script version:

         <script language="javascript">
              function mask(str,textbox,loc,delim){
              var locs = loc.split(',');
              str = str.replace(new RegExp("[^\\d\\"+delim+"]","g"),"");
              for (var i = 0; i <= locs.length; i++){
                   for (var k = 0; k <= str.length; k++){
                   if (k == locs[i]){
                   if (str.substring(k, k+1) != delim){
                        str = str.substring(0,k) + delim + str.substring(k,str.length)
                   }
                   }
                   }
              }
              textbox.value = str
              }
         </script>

0
 
GwynforWebCommented:
my try

          <script language="javascript">
               function mask(str,textbox,loc,delim){
                   str = str.replace(/\D/g,'');
                   textbox.value = str
                   textbox.value+=''
                   textbox.focus()
               }
          </script>
0
 
GwynforWebCommented:
a better version of my try is


          <script language="javascript">
               function mask(str,textbox,loc,delim){
                    if (/\D/.test(str)){
                     str = str.replace(/\D/g,'');
                     textbox.value = str
                    }
               }
          </script>



you can also do it like this as well


<script>
  function mask(textbox){    
  if (/\D/.test(textbox.value))
     textbox.value= textbox.value.replace(/\D/g,'');
  }
</script>

<input onkeyup="mask(this)">
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now