自动添加连字符的html模式答案

【问题标题】：html pattern that automatically adds Hyphens自动添加连字符的html模式
【发布时间】：2017-09-14 06:27:40
【问题描述】：

我有一个文本框，用户可以在其中输入 25 个字符的密钥。

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

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

最后会变成这样 11111-11111-11111-11111-11111

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

【问题讨论】：

您不能在 HTML 中执行此操作；你需要 JavaScript。查看 keyup/keypress 事件，然后计算框中有多少个字符，然后在必要时附加破折号。
也许this post可以帮助你。
@Utkanos 谢谢你，先生，我搞定了 :)

标签： html

【解决方案1】：

下面是一个小代码，如果你想进行一些更改，请尝试使用 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>

【讨论】：