Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Location
    Arizona, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile How do I use Javascript to mask a field?

    Hi,
    I have two fields, date field and a phone field, I would like to put a mask on. On my html my language=VB. I have been told I need to use Javascript to do this. Can you tell me if I can switch to Javascript in the middle of my html? If so how do I code the Javascript for these two fields?

    thanks,
    Sharon

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    The weakness of an input mask for a phone number is that it allows paste. (although that can be overcome)

    Code:
    Phone Number: <input type="text" name="phone" id = "phone" length = "10" maxlength = "10" onkeypress='return inputMask(event,"1234567890")'>
    
    <script type = "text/javascript">
    
    function inputMask(e,charsAllowed) {
    //validates textbox input against allowed characters
    if (charsAllowed.indexOf(String.fromCharCode(e.keyCode)) == -1) {
    return false;
    }
    }
    </script>
    Another way is to validate the phone number onblur:-

    Code:
    PHONE: <input type = "text" name = "myphone" id = "myphone" length = "10" maxlength = "10"  onblur="checkphone()">
    
    <script type = "text/javascript">
    function checkphone() {
    var f = document.getElementById("myphone").value;
    if (!/^(\d{10})$/.test(f)) {
    alert ("Please fill a 10-digit phone number");
    document.getElementById("myphone").value= "";
    document.getElementById("myphone").focus();
    return false;
    }
    }
    </script>
    Another way is to use three input boxes:-


    Code:
    Phone Number <input type = "text" id = "Ph1" size =" 3" maxlength = "3" onkeyup = "validate(this,2)">
    <input type = "text" id = "Ph2" size =" 3" maxlength = "3" onkeyup = "validate(this,3)">
    <input type = "text" id = "Ph3" size =" 4" maxlength = "4" onkeyup = "validate(this,3)">
    
    <script type = "text/javascript">
    
    function validate(which,next) {
    var val = which.value;
    val = val.replace(/[^0-9]/g,"");
    which.value = val;
    next = "Ph" + next;
    if (val.length == 3){
    document.getElementById(next).focus();
    }
    }
    </script>

    Dates can be dealt with in a similar manner. Remember that validating a date format does not ensure that the date is valid (e.g. 31st February).

    Scripts should be placed in the HTML right in front of the closing </body> tag.


    See also http://whattheheadsaid.com/2011/11/j...o-we-need-them

    “If you only do what you know you can do - then you never do very much.” - Tom Krause
    Last edited by Philip M; 10-16-2012 at 05:01 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

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