如何在JavaScript中实现用户名与Mac ID共用输入框的动态输入掩码

功能规则 #

• 输入内容以00开头时，判定为Mac ID输入场景，每输入2个字符后自动插入冒号分隔符
• 输入内容以字母开头时，判定为用户名输入场景，不自动插入分隔符，支持常规用户名输入规则

参考实现代码 #

页面结构与依赖引入（HTML） #

<script src="https://unpkg.com/imask"></script>
<div class="form-group">
  <label>用户名或Mac地址</label>
  <input type="text" class="form-control" name="user" id="user" placeholder="请输入内容..." />
</div>

动态掩码逻辑（JS） #

var dynamicMask = new IMask(document.getElementById('user'), {
  mask: [
    // Mac地址匹配规则
    {
      mask: '00:00:00:00:00:00'
    },
    // 用户名匹配规则，支持带@的邮箱格式用户名
    {
      mask: /^\S*@?\S*$/
    }
  ]
})

内容的提问来源于stack exchange，提问作者Muhammad Yahya Imran