如何创建具有预定义格式的输入字段，其中用户只能输入字段的特定部分

Question

我有一个基本的 HTML 输入字段（用于电话号码），当前允许用户在其中输入并提交他们想要的任何内容：

923-98-Ilovekittens :3

但是，我希望该字段看起来像这样：

+1 (___)-___-____

当用户输入 0-9 的数字时，我希望填补这些空白：

+1 (748)-55_-____

如何使用 Javascript（如果更简单，可以使用 Javascript 库）来完成此任务？

Answer 1

我想你可以使用一些输入掩码库，比如这个：https://imask.js.org/.

他们页面上的第三个示例可能适合您。

Answer 2

您可以通过在 HTML 文件中包含

Inputmask

库来使用像

Inputmask

这样的输入掩码库

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
   </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/5.0.6- beta.0/jquery.inputmask.min.js"></script>

并将输入掩码应用到输入字段

    <input type="text" id="phone" placeholder="+1 (___)-___-____">

<script>
  $(document).ready(function(){
    $("#phone").inputmask("[phone]");
  });
</script>