在使用模式插入输入之前自动格式化值

Question

我有一个带有电话模式（巴西数字系统）的 'tel' 类型输入：

<input class="form-control" maxlength="15" pattern="[\(]?[0-9]{2}[\)]?[ ]?[0-9]{4,5}[-]?[0-9]{4}" type="tel" value="">

我还使用 jQuery Mask 插件在键入时自动添加我想要的字符，并检索没有特殊字符的值以存储在数据库中。这是我的 MaskBehavior 和选项（对于库）：

var PhoneMaskBehavior = function (val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
    phoneOptions = {
        selectOnFocus: true,
        onKeyPress: function(val, e, field, options) {
            field.mask(PhoneMaskBehavior.apply({}, arguments), options);
        }
};

问题是我在从数据库加载号码时添加了默认值。它填写时没有特殊字符，我的表单不允许提交，因为该字段是必填字段且不符合模式。

这是我在输入中直接从数据库加载值时得到的：

这是我需要匹配的模式（以及当我手动输入数字时输入的内容，没有加载输入的 value 属性）：

有没有办法通过在数字之间添加特殊字符来自动加载值并使其与模式匹配，而不需要解析和处理字符串？

Answer 1

为什么不在加载时应用掩码？

var PhoneMaskBehavior = function(val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
  },
  phoneOptions = {
    selectOnFocus: true,
    onKeyPress: function(val, e, field, options) {
      field.mask(PhoneMaskBehavior.apply({}, arguments), options);
    }
  };

$(document).ready(function () {
  $('input[type=tel]').mask(PhoneMaskBehavior, phoneOptions)
})

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

<input value="51 3364 7979" type="tel" class="form-control" maxlength="15" pattern="[\(]?[0-9]{2}[\)]?[ ]?[0-9]{4,5}[-]?[0-9]{4}">

在使用模式插入输入之前自动格式化值

Automatically format value before inserting into input with pattern

html

javascript

jquery

jquery-mask