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

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

为什么不在负载上应用 mask ？

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}">