如何使用 Javascript 在用户输入中自动添加连字符？答案

【问题标题】：How to auto add a hyphen in user input using Javascript?如何使用 Javascript 在用户输入中自动添加连字符？
【发布时间】：2026-02-17 02:15:02
【问题描述】：

我正在尝试验证和调整用户输入的邮政编码以匹配以下格式：xxxxx 或 xxxxx-xxxx 如果用户输入超过 5 位数字，是否有使用 javascript 自动添加连字符 (-) 的简单方法？

【问题讨论】：

github.com/RobinHerbots/Inputmask参考

标签： javascript html validation input user-input

【解决方案1】：

您可以尝试使用简单的javascript函数如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>JS Bin</title>
  <script>
    function FN_HYPEN(){
    var input = document.getElementById("USER");

  if(input.value.length === 5) {
    input.value += "-";
  }

                       }
  </script>
</head>
<body>
<INPUT ID="USER" TYPE="TEXT" onKeypress="FN_HYPEN();"/>
</body>
</html>

【讨论】：

【解决方案2】：

试试下面的。

function add_hyphen() {
    var input = document.getElementById("myinput");
    var str = input.value;
    str = str.replace("-","");
    if (str.length > 5) {
        str = str.substring(0,5) + "-" + str.substring(5);
    }
    input.value = str
}

&lt;input type="text" id="myinput" value="a" OnInput="add_hyphen()"&gt;&lt;/input&gt;

【讨论】：

【解决方案3】：

安娜，

最好的方法是使用正则表达式。您需要的是：

^[0-9]{5}(?:-[0-9]{4})?$

你会使用十个类似的东西：

function IsValidZipCode(zip) {
        var isValid = /^[0-9]{5}(?:-[0-9]{4})?$/.test(zip);
        if (isValid)
            alert('Valid ZipCode');
        else {
            alert('Invalid ZipCode');
        }
    }

在你的 HTML 中这样称呼它：

<input id="txtZip" name="zip" type="text" /><br />
<input id="Button1" type="submit" value="Validate"
onclick="IsValidZipCode(this.form.zip.value)" />

有关正则表达式的更多信息，这是一篇好文章：

Regular Expressions on Mozilla Developers Network

【讨论】：

【解决方案4】：

肯定有！只需检查输入的字符串有多少个字符，如果是 5 个，则在字符串中添加连字符 :)

var input = document.getElementById("ELEMENT-ID");
input.addEventListener("input", function() {
  if(input.value.length === 5) {
    input.value += "-";
  }
}

【讨论】：