SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: input mask

  1. #1
    SitePoint Guru johnjohn2's Avatar
    Join Date
    Apr 2004
    Location
    here
    Posts
    746
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    input mask

    Does anyone know how I can create an input mask on a field where a number has to be zero filled. For example.

    Default entry would be:
    0000000000

    If user types in 0003 then the following would still display:
    0003000000

    If the user leaves the text box and the value is still
    0000000000

    then the value would stay as null as if they typed nothing in. (So that the form wouldn't save the zeros entry).

    Is this possible?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP 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">
    <!--

    var 
    Reg=/\D/g;
    var 
    Fill='0000000000000000';

    function 
    check0(obj){
     
    obj.value=obj.value.replace(Reg,'');
     
    obj.onblur=function(){
                 
    this.value=(this.value+Fill).substring(0,10);
                 if (
    this.value=='00000000000'){
                  
    this.value='';
                 }
                }
    }

    //-->
    </script></head>

    <body>
    <input name="fred" size="20" onkeyup="check0(this);">
    </body>

    </html> 

  3. #3
    SitePoint Guru johnjohn2's Avatar
    Join Date
    Apr 2004
    Location
    here
    Posts
    746
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is almost exactly what I need thanks. But, how would I have the zeros only appear if the user typed something in. For example, if I click into the text field type nothing, and then click out of it it filles it with zeros. How would I have the zero fill only if the user typed something first; like some kind if if statement that would say if null then do nothing else if not null zero fill it. Is this possible?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont understand your comments

    Tested with IE and FireFox

    key up activates the script

    only digits are allowed
    the script adds on onblur event

    the on blur event adds the required number of '0's

    if there are only '0's

    the value is set to ''

    I cannot see how it can be filled with only '0's

    As I say, Tested with IE and FireFox

    I cannot reproduce a filled with '0's condition

  5. #5
    SitePoint Guru johnjohn2's Avatar
    Join Date
    Apr 2004
    Location
    here
    Posts
    746
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I missed a zero from the code. It works great, except when I have it in a form and submit it without first tabbing to another text box it doesn't save the zeros. For example, I enter "1" in the text box and click enter, to submit the form. I see it quickly flash 1000000000 and then the form is submitted but the value saved is only "1". If I enter "1" and then tab to another text field it and then enter/submit the form it saves it properly. Is there a work around for this?

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could check it when the form's onsubmit event is triggered.

    You shouldn't rely on JavaScript since some people use browsers that don't have it enabled.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Guru johnjohn2's Avatar
    Join Date
    Apr 2004
    Location
    here
    Posts
    746
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I currently have this in my onsubmit event already. How do I include "check0(this);" as well? (Sorry, I'm a real noob at this)

    <form action="test.php" name="form1" onSubmit="YY_checkform('form1','col2','#q','0','Please enter a \'Name\'.','col8','11_........................................
    \([0-9]{4}\)$#2#1#3','3','Please enter a valid \'Effective Date\'.');return document.MM_returnValue">

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without knowing the name of the element(s) that you want to call that function on, I can't answer that.

    My advice: lose Dreamweaver and learn to code with just a text editor or hire a professional to do it for you.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of
    <form action="test.php" name="form1" onSubmit="YY_checkform('form1','col2','#q','0','Please enter a \'Name\'.','col8','11_........................................
    \([0-9]{4}\)$#2#1#3','3','Please enter a valid \'Effective Date\'.');return document.MM_returnValue">
    try

    PHP 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">
    <!--
    function 
    submitIt(f){
    // all your calls

    return true

    }


    //-->
    </script></head>

    <body>
     <form onsubmit="return submitIt(this);" action="test.php" name="MyForm" >
    </body>

    </html> 


Bookmarks

Posting Permissions

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