jQuery输入掩码求助：短横线后内容设为可选的实现方法

要让短横线-后的内容变成可选输入，只需要修改掩码规则，在可选段前加上?标记即可。

修改后的核心代码 #

$('#ContactInput').mask('09999999999-?99999999999')

完整示例代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<label class="control-label" for="ContactInput">
  <strong>POC Contact: (without dash)</strong>
</label>

<input type="text" class="form-control" maxlength="23" placeholder="e.g 03xxxxxxxxx 或 03xxxxxxxxx-03xxxxxxxxx" id="ContactInput" oninput="update()">

关键说明 #

jQuery Mask插件中，?符号用于标记后续的掩码内容为可选输入项：

• 用户只输入前面11位手机号时，输入框不会强制要求输入短横线和后续数字，也不会显示短横线；
• 当用户继续输入时，短横线会自动插入，同时允许输入后面的可选数字段。

输入框的maxlength="23"可以保留，刚好覆盖完整格式（11位+短横线+11位）的长度上限，避免输入过多内容。

内容的提问来源于stack exchange，提问作者Iqra khan