电话号码的 jQuery 输入掩码

Question

我希望用户的输入自动填充电话号码的标点符号，使其看起来像这样 (xxx) xxx-xxxx。这是我的 HTML 代码:

  <div class="form-group">
    <label class="control-label col-sm-2">Phone Number:</label>
    <div class="col-sm-10">          
      <input type="text" class="form-control" name="phoneNumber"
           id="phoneNumber" value="<?php echo $row["phoneNumber"];?>">
    </div>
  </div>

我还需要做什么才能完成这项任务？我正在尝试使用 jQuery 和输入掩码。

Answer 1

您可以使用Input Mask jQuery 扩展来实现此目的。

$('#phoneNumber').inputmask("(999) 999-9999");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

<label class="control-label col-sm-2">Phone Number:</label>
  <div class="col-sm-10">          
  <input type="text" class="form-control" name="phoneNumber" id="phoneNumber" value="">
</div>