javascript - 如何在文本输入控件中显示蒙版

如何使这样的事情发生，以便输入框在您单击输入框时显示下划线/下划线，然后在您键入短划线时继续被字符替换。

就像在这种情况下的电话没有。当我点击输入框并填写联系人编号时，已经有一个10位数的下划线/下划线。字符替换下划线/下划线。

enter image description here

就像有“移动”输入框一样，我希望它以下列方式工作：

空闲时应显示空白（白色），但点击时应显示十个字符的下划线/下划线/短划线，表示10位数的电话号码。需要填写。

e.g。手机+91（0）：____________________
然后，当我开始输入破折号时，应该开始被输入的数字替换。就像输入2个数字/数字一样，在输入的2个数字/数字之后应该有8个破折号。

e.g。手机+91（0）：98 ________________
这应该像5个数字一样继续下去，它看起来应该如下所示

e.g。手机+91（0）：99887 __________

等等。由于输入框中已填写所有数字/数字，所以破折号完全被输入的数字替换，这表示用户已填写所有10位数字且未遗漏任何数字。