1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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:
    747
    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:
    747
    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