?
Solved

input box mask help

Posted on 2005-03-29
5
Medium Priority
?
327 Views
Last Modified: 2012-08-13
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
Comment
Question by:narmi2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13651215
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
 
LVL 32

Accepted Solution

by:
Batalf earned 800 total points
ID: 13651242
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
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 400 total points
ID: 13651327
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
 
LVL 31

Assisted Solution

by:GwynforWeb
GwynforWeb earned 800 total points
ID: 13653392
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
 
LVL 31

Assisted Solution

by:GwynforWeb
GwynforWeb earned 800 total points
ID: 13656091
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question