jquery - 如何在输入时更改输入中的电话号码格式？

Question

我的 CodePen: http://codepen.io/leongaban/pen/cyaAL

我有一个电话号码输入字段，最多允许 20 个字符(国际号码)。

我也在使用 Masked input jQuery plugin由 Josh Bush格式化输入中的电话号码以使其“漂亮”。

• 我的问题是在电话是10位数或者 less，它应该使用 Masked 输入格式。

• 但是，当电话号码超过 10 位时， 格式应该被删除。

---

这是我当前的:CodePen ，手机是我要完成此操作的输入字段。工作电话是 Mask input plugin 的默认功能的一个示例。 .

你会如何解决这个问题？

手机输入框的jQuery:

case '2':
    console.log('created phone input');
    $('.new_option').append(myphone);
    $('.added_mobilephone').mask('(999) 999-9999? 9');
    $('.added_mobilephone').keypress(function(event){

      if (this.value.trim().length > 10) {
        console.log('this.value = '+this.value.trim());
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }

      /*if (this.value.length < 9) {
        console.log(this.value);
        console.log('less then 10');
        $('.added_mobilephone').mask('(999) 999-9999? 9999999999');
      } else if (this.value.length > 9) {
        console.log(this.value);
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }*/
    });
    break;

Answer 1

$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d+)$/, "($1)$2-$3"));
});

这肯定会起作用，并且会立即正确处理填充完整字符串(例如，1234567890)。

/* example jquery use */

$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d+)$/, "($1)$2-$3"));
});

/* use your css to beautify the form */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- form input for example user -->
<form>
  <input type="text" name="phone" placeholder="Phone Number" />
</form>