html pattern that automatically adds Hyphens

Question

I have a text box that a user enters a 25 character key into.

<br><input type="text" name="Key" pattern=".{29}" style="text-transform:uppercase">

thats my current code. Now the thing I am trying to achieve is when the user types the first 5 characters it should add the - for them and then again after the next 5.

In the end it will look like this 11111-11111-11111-11111-11111

I did some research but cannot find anything. I have made the pattern the length that I want and made the text auto uppercase but I cannot find out how to add the hyphen automatically.

You can't do this in HTML; you need JavaScript. Look into keyup/keypress events and then count how many chars are in the box, then append a dash if necessary. — Mitya, Apr 18 '17 at 12:14
Maybe [this post](http://stackoverflow.com/questions/11632525/insert-dash-after-every-4th-character-in-input) can help you. — Douwe de Haan, Apr 18 '17 at 12:15

score 0 · Accepted Answer · answered Apr 18 '17 at 12:38

Here is a small code below , try playing with javascript if u want to make some changes :-

<html>
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    function addDashes(f)
    {
    f.value = f.value.slice(0,5)+"-"+f.value.slice(5,10)+"-"+f.value.slice(10,15);
    }
    </SCRIPT>
    </head>
    <BODY>
    <form>
    Phone: <input type='text' name='phone' onBlur='addDashes(this)'><BR>

    </form>
    </body>
    </html>

html pattern that automatically adds Hyphens

1 Answers1