www.webdeveloper.com
Results 1 to 10 of 10

Thread: Javascript input masks

  1. #1
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34

    Javascript input masks

    Hey,

    is there any good solution to implement masks on an input-Element to format currencies, telephone numbers and so forth ?

    I've found that link so far (*click*), but those either don't work anyway or they don't meet my requirements...

    can anyone help me?

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34
    thanks for your immediate reply

    is there any chance to make more complex masks like "N" for alphanumeric values, "X" for all ascii characters and so forth with your script?

  4. #4
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34
    does anyone of you have another suggestion to solve my problem?

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript" >
    <!--
    // Format by Array (07-August-2012)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var S1='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var S2='0123456789';
    
    function zxcFormatByArray(obj,ary){
     if (typeof(obj)=='string'){
      obj=document.getElementById(obj);
     }
     var v=obj.value.split(''),rtn='',z0=0;
     for (var z0=0;z0<Math.min(v.length,ary.length);z0++){
      if (ary[z0].indexOf(v[z0])>=0){
       rtn+=v[z0];
      }
      else {
       break;
      }
     }
     obj.value=rtn;
     obj.style.color=ary.length!=rtn.length?'blue':'black';
     return ary.length==rtn.length;
    }
    
    
    //-->
    </script><span style="font-Size:12px;" > Format 'AA(N)' </span><br>
    </head>
    
    <body>
    <input name="" size="15" value="" style="color:gray;" onkeyup="zxcFormatByArray(this,[S1,S1,'(',S2,')']);" ><br>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Did this just for fun, so it's probably not perfect:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Javascript input masks</title>
    
    		<script type="text/javascript">
    
    			function format(element, mask)
    			{
    				var
    					text = '',
    					data = element.value,
    					c, m, i, x;
    
    				for (i = 0, x = 1; x && i < mask.length; ++i) {
    
    					c = data.charAt(i);
    					m = mask.charAt(i);
    
    					switch (mask.charAt(i)) {
    						case '#' : if (/\d/.test(c)) {text += c;} else {x = 0;} break;
    						case 'A' : if (/[a-z]/i.test(c)) {text += c;} else {x = 0;} break;
    						case 'N' : if (/[a-z0-9]/i.test(c)) {text += c;} else {x = 0;} break;
    						case 'X' : text += c; break;
    						default  : text += m; break;
    					}
    				}
    				element.value = text;
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<div><input type="text" onkeyup="format(this, '## (NN) #X# #### done!');" /> ## (NN) #X# #### done!</div>
    		<div><input type="text" onkeyup="format(this, '##/##/####');" /> ##/##/####</div>
    		<div><input type="text" onkeyup="format(this, 'AAA-###-AAA-###');" /> AAA-###-AAA-###</div>
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact | bionoid

  7. #7
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34
    thanks, guys you helped me a lot!!

    which of the two solutions is more efficent in your opinion?

  8. #8
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Just use what you feel comfortable with.
    Javascript isn't the worlds most optimized language to begin with, but you're not exactly processing vast amounts of data anyway.

    JavaScript: Learn | Validate | Compact | bionoid

  9. #9
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34
    Quote Originally Posted by bionoid View Post
    Just use what you feel comfortable with.
    Javascript isn't the worlds most optimized language to begin with, but you're not exactly processing vast amounts of data anyway.

    I've used your version and adopted it a little bit - the only thing that's missing for a perfect solution would be the handling if the user deletes something - have you thought about that as well?

  10. #10
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    I only really thought about if the user uses backspace, right now the formatter would put any non-evaluated character back, but in regards to the user deleting something in the middle I haven't.

    Something for a rainy day
    JavaScript: Learn | Validate | Compact | bionoid

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles