在前三个和后四个Jquery或Javascript后面加短划线的格式数字

Question

如何检查用户是否在前三个数字和第二四个数字后添加了短划线，如果用户没有添加短划线，则在用户键入并追加到输入框时，通过在前三位数字和第四四位数字后添加短划线来格式化数字。

附言：我使用了Jquery Mask，在所有浏览器上都不能很好地工作，在移动上也有错误问题

我也查过这个帖子https://codepen.io/SammyIsra/pen/bWgWZq没有回答我的问题

我的代码：

<input type="text" placeholder="Your Phone Number" id="number_here">
User phone number input = XXXXXXXXXXX

我想要的是

XXX-XXXX-XXXX

通过首先检查前三个数字和后四个数字后的破折号来格式化它，如果在键入时丢失(用户未添加(，则从自动添加

XXXXXXXXXXXX to XXX-XXXX-XXXX 

当用户键入并追加时。

Answer 1

您提供的链接有很好的解决方案，我不明白它为什么没有回答您的问题。

它建议用户在自动打字时一定要除数。。。

以下是采用相同策略的VanillaJS解决方案：

document.querySelector("#number_here").addEventListener("keypress", (e) => e.target.value.length === 3 ? e.target.value = e.target.value + "-" : e.target.value.length === 8 ? e.target.value = e.target.value + "-" : null)

<input type="text" placeholder="Your Phone Number" id="number_here" value="">

当键入前3个数字时，将-加到值上，在标记8…上也这样做