how to use HTML to add "-" to fix in input box?

Discussion in 'JavaScript and AJAX' started by ckcy2008, Jan 25, 2010.

  1. ckcy2008

    ckcy2008 New Member

    Joined:
    Jan 25, 2010
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Hi everyone..how to make the input text box with "-" ?

    like the text box is look like " - "

    before the dash is 4 size, after the dash is 10 size.

    whatever user key in 6 digits, it will become like this "1234-56"

    how to make it like this in HTML?
     
  2. kiddo

    kiddo New Member

    Joined:
    Apr 11, 2009
    Messages:
    65
    Likes Received:
    1
    Trophy Points:
    0
    First, what is this input used for?
    if it is for a verification or something like this, I think you can make two text box with limited length of input.

    If you just want to use 1 text box, you must use javascript (I think). Coz as far as I know, HTML is just used for designing website, it's not a programming language.

    HTML -> HyperText Markup Language
     
  3. ckcy2008

    ckcy2008 New Member

    Joined:
    Jan 25, 2010
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Thankx for ur reply

    the input box, use for key in only.....
    so, i have to create to input box??
    [input with length 4] - [input with lenght 2] <--- is it like this?
     
  4. SpOonWiZaRd

    SpOonWiZaRd Know what you can do.

    Joined:
    May 30, 2007
    Messages:
    746
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Network Engineer/Programmer
    Location:
    South Africa
    Here is some javascript I use to make it so that the user can only enter numbers:

    Code:
    <script type="text/javascript">
    
    function numbersonly(myfield, e, dec)
    {
    var key;
    var keychar;
    
    if (window.event)
       key = window.event.keyCode;
    else if (e)
       key = e.which;
    else
       return true;
    keychar = String.fromCharCode(key);
    
    if ((key==null) || (key==0) || (key==8) || 
        (key==9) || (key==13) || (key==27) )
       return true;
    
    else if ((("0123456789+").indexOf(keychar) > -1))
       return true;
    
    else if (dec && (keychar == "."))
       {
       myfield.form.elements[dec].focus();
       return false;
       }
    else
       return false;
    }
    
    Then my button tag looks like this: <input type="text" name="IdNumber" onKeyPress="return numbersonly(this, event)" size="40" maxlength="15">
    Maybe you can change the code to suit your goal?? I think.
     
    Last edited by a moderator: Jan 25, 2010
  5. kiddo

    kiddo New Member

    Joined:
    Apr 11, 2009
    Messages:
    65
    Likes Received:
    1
    Trophy Points:
    0

    yeah, that's what I mean (if you don't want to use javascript).
    But if you want to use javascript, maybe you can try SpOonWiZaRd code
     
  6. ckcy2008

    ckcy2008 New Member

    Joined:
    Jan 25, 2010
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Thank you very much!!!! ok... i know how to do now...
    xie xie
     
  7. SpOonWiZaRd

    SpOonWiZaRd Know what you can do.

    Joined:
    May 30, 2007
    Messages:
    746
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Network Engineer/Programmer
    Location:
    South Africa
    Here is also a link to a page that does it in a very cool way, look at where you have to enter your number. http://www.vuzu.tv/register/
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice