Link to home
Start Free TrialLog in
Avatar of narmi2
narmi2

asked on

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
Avatar of Batalf
Batalf
Flag of United States of America image

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>
ASKER CERTIFIED SOLUTION
Avatar of Batalf
Batalf
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial