npm引入的inputmask组件data-inputmask手机号掩码不生效

问题描述 #

前端开发中参照npmjs平台inputmask包官方文档完成配置，需要实现电话号码输入掩码功能，但功能始终无法正常生效。

现有实现代码 #

代码通过动态拼接模板生成带data-inputmask属性的输入框，调用puDialogV2组件渲染弹窗，目前掩码效果未正常触发：

var template = '\
<div class="contactItem">\
                    <label style="padding:6px" >Home phone</label>\
                    <input class="form-control" type="text" data-inputmask="\'mask\': \'999-99-9999\'" />\ 
                    </div>\
                </div>\
';

self.dialog = puDialogV2.showDialog($('.body-content'), 'Add Contact', template, self, self.addContact, self.cancelSaveContact);

故障原因 #

inputmask的默认data属性自动初始化逻辑，只会在页面初始加载时扫描已存在的DOM节点，通过弹窗动态插入的输入框是在初始化完成后才追加到页面的，没有被绑定掩码逻辑，自然不会生效。

修复方案 #

• 先确认项目中已正确引入inputmask核心依赖文件，控制台无相关加载报错
• 放弃纯data属性自动初始化的方案，等弹窗组件完成DOM渲染后，手动选中目标输入框调用掩码绑定方法
• 如果puDialogV2组件提供渲染完成的回调函数，直接在回调中执行绑定逻辑即可；如果没有对应回调，可以用setTimeout把绑定逻辑放到下一个事件循环执行，确保DOM已经插入页面

修正后代码示例 #

var template = '\
<div class="contactItem">\
    <label style="padding:6px" >Home phone</label>\
    <input class="form-control home-phone-input" type="text" />\
    </div>\
</div>\
';

self.dialog = puDialogV2.showDialog($('.body-content'), 'Add Contact', template, self, self.addContact, self.cancelSaveContact);
// DOM渲染完成后手动绑定掩码
setTimeout(() => {
  Inputmask({
    mask: '999-99-9999'
  }).mask(self.dialog.querySelector('.home-phone-input'));
}, 0);

内容的提问来源于stack exchange，提问作者Rnue