自动添加连字符的html模式

时间:2017-04-18 12:11:28

标签: html

我有一个文本框,用户输入一个25个字符的密钥。

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

那是我现在的代码。现在,我想要实现的是当用户输入前5个字符时,它应该为它们添加 - 然后在下一个5之后再次添加。

最后看起来会像这样11111-11111-11111-11111-11111

我做了一些研究但找不到任何东西。我已经将模式设置为我想要的长度并使文本自动为大写但我无法找到如何自动添加连字符。

1 个答案:

答案 0 :(得分:0)

下面是一个小代码,如果你想进行一些更改,请尝试使用javascript: -

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