www.webdeveloper.com
Results 1 to 11 of 11

Thread: input mask for phone number

  1. #1
    Join Date
    Sep 2003
    Posts
    649

    input mask for phone number

    I want to create an input mask that when a phone number is entered in the phone field it is automatically formatted to (xxx)xxx-xxxx.

    How can I do this?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Try this:

    The number is "masked" on blur (when you leave the text field and focus another field or the rest of the document):

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    script>
    function 
    mask(f){
    tel='(';
    var 
    val =f.value.split('');
    for(var 
    i=0;i<val.length;i++){
    if(
    i==2){val[i]=val[i]+')'}
    if(
    i==5){val[i]=val[i]+'-'}
    tel=tel+val[i]
    }
    f.value=tel;
    }
    </script>
    </head>
    <body>
    <form>
    <input name="phone" type="text" onblur="mask(this)">
    </form>
    </body>
    </html> 

  3. #3
    Join Date
    Sep 2003
    Posts
    649
    Thanks.
    My only prob is that if someone leaves the field blank the jscript automatically inserts a (.
    Is there an easy way to fix this?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <
    html
    <
    head
    <
    script
    function 
    mask(f){ 
    tel=''
    var 
    val =f.value.split(''); 
    for(var 
    i=0;i<val.length;i++){ 
    if(
    i==0){val[i]='('+val[i]} 
    if(
    i==2){val[i]=val[i]+')'
    if(
    i==5){val[i]=val[i]+'-'
    tel=tel+val[i

    f.value=tel

    </script> 
    </head> 
    <body> 
    <form> 
    <input name="phone" type="text" onblur="mask(this)"> 
    </form> 
    </body> 
    </html> 

  5. #5
    Join Date
    Oct 2006
    Posts
    13
    Check this web site www.wiseblocks.com.

  6. #6
    Join Date
    Jul 2008
    Posts
    3

    Smile My Add to this function. Real TIME TELEPHONE MASK

    Using the Code..
    Instead of just wait to lost the focus, read the value of input and change it in real time

    function mask(f){
    tel='(';
    var val =f.value.split('');
    for(var i=0; i<val.length; i++){
    if( val[i]=='(' ){
    val[i]=''
    }
    if( val[i]==')' ){
    val[i]=''
    }
    if( val[i]=='-' ){
    val[i]=''
    }
    if( val[i]=='' ){
    val[i]=''
    }
    }
    //
    for(var i=0; i<val.length; i++){
    if(i==3){ val[i]=val[i]+')' }
    if(i==7){ val[i]=val[i]+'-' }
    if(i==10){ val[i]=val[i]+'-' }
    tel=tel+val[i]
    }
    f.value=tel;
    }

    I hope to be useful..
    Saludos desde MExico

  7. #7
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    What about the vast majority of phone numbers that will not fit into that mask?
    Stephen

  8. #8
    Join Date
    Jul 2008
    Posts
    3

    Hi. Felgall

    Quote Originally Posted by felgall
    What about the vast majority of phone numbers that will not fit into that mask?

    oh.. yes of course, there are a lot of formats i guess
    if you wanna change the format just do the next

    for(var i=0; i<val.length; i++){
    if(i==3){ val[i]=val[i]+')' } <-- change de position of )
    if(i==7){ val[i]=val[i]+'-' } <-- and the place to have this -
    if(i==10){ val[i]=val[i]+'-' } <-- or this
    tel=tel+val[i]
    }

    like international number from US +52(321)65465-45.. so.. first add + instead ( then count the characters ( pos 2, ) pos 5, - pos 11. ok something like that. you do the math. I hope to help you..

    Saludos..

  9. #9
    Join Date
    Jul 2008
    Posts
    3

    Smile Hi. Felgall

    ho.. yes of curse, there are a lot of formats i guess
    if you wanna change the format just do the next

    for(var i=0; i<val.length; i++){
    if(i==3){ val[i]=val[i]+')' } <-- change de position of )
    if(i==7){ val[i]=val[i]+'-' } <-- and the place to have this -
    if(i==10){ val[i]=val[i]+'-' } <-- or this
    tel=tel+val[i]
    }

    like international number from US +52(321)654-6545.. so.. first add + instead ( then count the characters ( pos 2, ) pos 5, - pos 9. ok something like that. you do the math. I hope to help you..

    Saludos..

  10. #10
    Join Date
    Jun 2012
    Posts
    1

    Smile I added to the base

    I added to the base. Call this script with onkeychange to have liveupdate. It has support for USA and international numbers. Also with the previous code there were some bugs in live use where hyphens would print on each keypress hence the need for checks if the hyphen is already in place.

    var mask = function(content) {
    var val = content.value.split('');
    if (val.length > 13) {
    tel = '+'
    }
    else {tel = '('}
    for(var i=0; i< val.length; i++) {
    if(val[i] == '+'){
    val[i]='';
    }
    if(val[i] =='('){
    val[i]='';
    }
    if(val[i]==')'){
    val[i]='';
    }
    if(val[i]==' '){
    val[i]='';
    }
    if(val[i]=='-'){
    val[i]='';
    }
    }
    for(var i=0; i<val.length; i++){
    if (i==3){
    if (val.length>13) {
    val[i]= ' (' + val[i];
    }
    else {
    val[i]=val[i]+') ';
    }
    }
    if (i==7){
    if (val.length>13) {
    val[i]= val[i] + ') ';
    if (val[i+2] == '') {
    val[i+2]='';
    val[i+5]=''
    }
    }
    }
    if(i==8 && val[i+1] != ''){
    if (val.length <= 13) {
    val[i]=val[i]+'';
    }
    }
    tel=tel+val[i];
    }
    content.value=tel;
    };

  11. #11
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252

    The customer is The King !

    The numero has to have at first 10 digits ! Then remove all others characters and display a message if it is not the case.
    Otherwise, it is not more than a question of formatting. The developer can show its capacities ...

    Try something like this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    body{background:#eee;color:}
    p{margin:0}
    form{display:block;width:300px;margin:0 auto;}
    </style>
    </head>
    <body>
    <form>
       <fieldset><Legend>Phone number</legend>
          <p><Label>Enter your number<br><input name="phone" type="text" onblur="testPhone(this)"></label></p>
          <p>&nbsp;</p>
          <p id="rsp"></p>
       </fieldset>
    </form> 
    <script type="text/javascript">
    function testPhone(objNpt){
    	var n=objNpt.value.replace(/[^\d]+/g,'');// replace all non digits
    	if (n.length!=10) {
    		document.getElementById('rsp').innerHTML="This number seems erroneus !";
    		return;}
    		document.getElementById('rsp').innerHTML="";	
    	objNpt.value=n.replace(/(\d\d\d)(\d\d\d)(\d)/,'($1)$2-$3');// format the number
    }
    </script>
    </body>
    </html>
    The user will have the possibility of typing strange or quite other characters (like Phone or Tel ) without problem...
    Last edited by 007Julien; 06-22-2012 at 05:59 PM. Reason: Title

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