Input Mask

Topics: Developer Forum
Feb 19, 2012 at 3:07 AM

I'm a VFP programmer, not a Web developer.  I'm learning this html on the fly.  Things that were so easy in VFP seem to be more complex than necessary in html and JS.

My latest thing I realize I need to clean up is setting up input masks.  The JS solutions out there just seem less than what I'm looking for.  I'll probably use what is out there for date input masks.  But, I'd like to make a better one for numeric masks.

Before I try to build an input mask function via VFP I'd like to know if anyone else has done this already or even tried to do it.  Should I stick with JS for this?  I'm specifically try to build a mask like VFP has when you set it for 99999.99.

Please let me know if anyone has a good numeric mask.  If not and I build one myself I will be sure to share it.

TIA.

BR

Feb 19, 2012 at 3:19 AM

Vfp will work on server side, I think that JS will be better to mask at client side ( browser ),  take a look here http://www.webresourcesdepot.com/javascript-input-masks/

If you still want to make a desktop program is better to use regular foxpro, remember that Active VFP is designed to make dinamic web sites, based on Foxpro engine, Not html foxpro forms.

 

Regards

Loadingpower

Feb 19, 2012 at 4:47 AM

Thanks for the link.

Is there any you like best?  There are many choices there.

Thanks.

BR

Feb 19, 2012 at 5:20 AM

IMask do the job very easy

input class="iMask" id="myPhone" name="myPhone" type="text"

  • value="116969"
  • alt="{
  • type:'fixed',
  • mask:'(99) 9999-9999',
  • stripMask: true
  • }"

    A litle off topic, But I'm playng now with this one and activeVFP

    http://www.kendoui.com/?utm_source=Web-Resources-Depot&utm_medium=banner&utm_campaign=Kendo_468x60_Aug-2011

    And I'm dreaming a lot off aplications, take a look

  • Feb 19, 2012 at 5:04 PM

    Thanks for the suggestion.  A little extra help would be greatly appreciated because I can't get it to work. 

     

    Here's what I've.  I downloaded mootools.js and imask.js files and put them in the activevfp\js folder.

    In my html I have these statements:

    <head>
     <script type="text/javascript" src="js/mootools.js"></script> 
     <script type="text/javascript" src="js/iMask.js"></script> 
    </head>

    Initiating the class is where I'm probably messing up.  I'm supposed to put it between <style></style>?  This part confuses me.  Anyhow, here is what I have:

    <style type="text/css">
      new iMask({  
        onFocus: function(obj) {  
            obj.setStyles({"background-color":"#ff8", border:"1px solid #880"});  
        },  
     
        onBlur: function(obj) {  
            obj.setStyles({"background-color":"#fff", border:"1px solid #ccc"});  
        },  
     
        onValid: function(event, obj) {  
            obj.setStyles({"background-color":"#8f8", border:"1px solid #080"});  
        },  
     
        onInvalid: function(event, obj) {  
            if(!event.shift) {  
                obj.setStyles({"background-color":"#f88", border:"1px solid #800"});  
            }  
        }  
    }); 

    And, finally, for the input statement I have this:

       <input class="iMask"  name="CAmount" style="width: 54px" type="text" value="<%=osession.VALUE("camount")%>" alt="{type:'number', groupSymbol: ',', groupDigits: 3, decSymbol: '.', decDigits: 2, stripMask: true}" />

    Everything is being ignored and behaves just as it did without imask and mootools.

    Thanks.

    BR

    Feb 19, 2012 at 11:41 PM

    Tr on this another way

     

    http://cwolves.github.com/jQuery-iMask/

    Feb 19, 2012 at 11:42 PM

    <!DOCTYPE html

    >

    <

    html

    >

    <

    head

    >

    <

    meta charset

    ='utf-8'>

    <

    title>cwolves/jQuery-iMask @ GitHub</title

    >

    <

    script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script

    >

    <

    script type="text/javascript" src="js/jquery-imask-min.js"></script

    >

    <

    style type

    ="text/css">

    body

    {

     

    margin-top : 1.0em;

     

    background : #dadada;

     

    background : -moz-linear-gradient(-90deg, #fff, #dadada) fixed;

     

    background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dadada)) fixed;

     

    font-family : Helvetica, Arial, FreeSans, san-serif;

     

    color : #959595;

    }

    #container

    {

     

    margin : 0 auto;

     

    width : 700px;

    }

    h1

    {

     

    font-size : 3.8em;

     

    color : #000;

     

    margin-bottom : 3px;

    }

    h1 .small

    {

     

    font-size : 0.4em;

    }

    h1 a

    {

     

    text-decoration : none;

    }

    h2

    {

     

    font-size : 1.5em;

     

    color : #000;

    }

    h3

    {

     

    text-align : center;

     

    color : #000;

    }

    a

    {

     

    color : #000;

    }

    .description

    {

     

    font-size : 1.2em;

     

    margin-bottom : 30px;

     

    margin-top : 30px;

     

    font-style : italic;

    }

    .gist

    {

     

    font-size : .8em;

     

    margin : 10px 0;

    }

    hr

    {

     

    border : 0;

     

    width : 80%;

     

    border-bottom : 1px solid #aaa;

    }

    .footer

    {

     

    text-align : center;

     

    padding-top : 30px;

     

    font-style : italic;

    }

    label

    {

     

    min-width : 150px;

     

    display : inline-block;

    }

    p

    {

     

    margin-top : 50px;

    }

    .note

    {

     

    font-size : .7em;

    }

    .note span

    {

     

    font-weight : bold;

    }

    input

    {

     

    font-family : "segoe ui", monospace;

    }

    </

    style

    >

    <

    script

    >

    $(

    function(){

    $(

    '#input1').iMask({

    type :

    'fixed'

    , mask :

    '[99.999.999-x]'

    , stripMask :

    true

    })

    $(

    '#input2').iMask({

    type :

    'number'

    });

    $(

    '#input3').iMask({

    type :

    'number'

    , decDigits : 0

    , decSymbol :

    ''

    , groupSymbol :

    '.'

    });

    $(

    '#input4').iMask({

    type :

    'number'

    , decDigits : 0

    , decSymbol :

    ''

    , sanity :

    function( val ){

     

    return Math.min( 1000000, Math.max( 0, parseInt( val.replace( /\D/g, '' ) ) ) )

    }

    });

    });

    </

    script

    >

    </

    head

    >

    <

    body

    >

     

    <a href="http://github.com/cwolves/jQuery-iMask"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>

     

    <div id="container">

     

    <h1><a href="http://github.com/cwolves/jQuery-iMask">jQuery-iMask</a>

     

    <span class="small">by <a href="http://github.com/cwolves">cwolves</a></span></h1>

     

    <div class="description">

    Masking plugin for jQuery

     

    </div>

     

    <h2>Demos</h2>

    Straight to the demos!

     

    <p>

     

    <label>[99.999.999-x]</label><input id="input1" tabindex="1">

     

    <script src="https://gist.github.com/1128592.js?file=1.js"></script>

     

    </p>

     

    <p>

     

    <label>Numeric Input</label><input id="input2" tabindex="2">

     

    <script src="https://gist.github.com/1128592.js?file=2.js"></script>

     

    </p>

     

    <p>

     

    <label>Euro Integers</label><input id="input3" tabindex="3">

     

    <script src="https://gist.github.com/1128592.js?file=3.js"></script>

     

    </p>

     

    <p>

     

    <label>0-1000000 Integer</label><input id="input4" tabindex="4">

     

    <div class="note"><span>Note:</span> I plan to make this simplier</div>

     

    <script src="https://gist.github.com/1128592.js?file=4.js"></script>

     

    </p>

     

     

    <div class="footer">

    get the source code on GitHub :

    <a href="http://github.com/cwolves/jQuery-iMask">cwolves/jQuery-iMask</a>

     

    </div>

     

    </div>

    </

    body

    >

    </

    html

    >

    Feb 19, 2012 at 11:42 PM

    <!DOCTYPE html

    >

    <

    html

    >

    <

    head

    >

    <

    meta charset

    ='utf-8'>

    <

    title>cwolves/jQuery-iMask @ GitHub</title

    >

    <

    script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script

    >

    <

    script type="text/javascript" src="js/jquery-imask-min.js"></script

    >

    <

    style type

    ="text/css">

    body

    {

     

    margin-top : 1.0em;

     

    background : #dadada;

     

    background : -moz-linear-gradient(-90deg, #fff, #dadada) fixed;

     

    background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dadada)) fixed;

     

    font-family : Helvetica, Arial, FreeSans, san-serif;

     

    color : #959595;

    }

    #container

    {

     

    margin : 0 auto;

     

    width : 700px;

    }

    h1

    {

     

    font-size : 3.8em;

     

    color : #000;

     

    margin-bottom : 3px;

    }

    h1 .small

    {

     

    font-size : 0.4em;

    }

    h1 a

    {

     

    text-decoration : none;

    }

    h2

    {

     

    font-size : 1.5em;

     

    color : #000;

    }

    h3

    {

     

    text-align : center;

     

    color : #000;

    }

    a

    {

     

    color : #000;

    }

    .description

    {

     

    font-size : 1.2em;

     

    margin-bottom : 30px;

     

    margin-top : 30px;

     

    font-style : italic;

    }

    .gist

    {

     

    font-size : .8em;

     

    margin : 10px 0;

    }

    hr

    {

     

    border : 0;

     

    width : 80%;

     

    border-bottom : 1px solid #aaa;

    }

    .footer

    {

     

    text-align : center;

     

    padding-top : 30px;

     

    font-style : italic;

    }

    label

    {

     

    min-width : 150px;

     

    display : inline-block;

    }

    p

    {

     

    margin-top : 50px;

    }

    .note

    {

     

    font-size : .7em;

    }

    .note span

    {

     

    font-weight : bold;

    }

    input

    {

     

    font-family : "segoe ui", monospace;

    }

    </

    style

    >

    <

    script

    >

    $(

    function(){

    $(

    '#input1').iMask({

    type :

    'fixed'

    , mask :

    '[99.999.999-x]'

    , stripMask :

    true

    })

    $(

    '#input2').iMask({

    type :

    'number'

    });

    $(

    '#input3').iMask({

    type :

    'number'

    , decDigits : 0

    , decSymbol :

    ''

    , groupSymbol :

    '.'

    });

    $(

    '#input4').iMask({

    type :

    'number'

    , decDigits : 0

    , decSymbol :

    ''

    , sanity :

    function( val ){

     

    return Math.min( 1000000, Math.max( 0, parseInt( val.replace( /\D/g, '' ) ) ) )

    }

    });

    });

    </

    script

    >

    </

    head

    >

    <

    body

    >

     

    <a href="http://github.com/cwolves/jQuery-iMask"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>

     

    <div id="container">

     

    <h1><a href="http://github.com/cwolves/jQuery-iMask">jQuery-iMask</a>

     

    <span class="small">by <a href="http://github.com/cwolves">cwolves</a></span></h1>

     

    <div class="description">

    Masking plugin for jQuery

     

    </div>

     

    <h2>Demos</h2>

    Straight to the demos!

     

    <p>

     

    <label>[99.999.999-x]</label><input id="input1" tabindex="1">

     

    <script src="https://gist.github.com/1128592.js?file=1.js"></script>

     

    </p>

     

    <p>

     

    <label>Numeric Input</label><input id="input2" tabindex="2">

     

    <script src="https://gist.github.com/1128592.js?file=2.js"></script>

     

    </p>

     

    <p>

     

    <label>Euro Integers</label><input id="input3" tabindex="3">

     

    <script src="https://gist.github.com/1128592.js?file=3.js"></script>

     

    </p>

     

    <p>

     

    <label>0-1000000 Integer</label><input id="input4" tabindex="4">

     

    <div class="note"><span>Note:</span> I plan to make this simplier</div>

     

    <script src="https://gist.github.com/1128592.js?file=4.js"></script>

     

    </p>

     

     

    <div class="footer">

    get the source code on GitHub :

    <a href="http://github.com/cwolves/jQuery-iMask">cwolves/jQuery-iMask</a>

     

    </div>

     

    </div>

    </

    body

    >

    </

    html

    >

    Feb 21, 2012 at 2:08 PM

    Thanks for sharing. Kendo is awesome!