vue内input框限制只能输入手机号

45次阅读

共计 460 个字符,预计需要花费 2 分钟才能阅读完成。

前端开发中经常遇到手机号输入的情况,而产品往往会要求只能输入手机号,禁止混入其他内容;
最近整理了下之前几个项目的方法,找到一个在 vue 项目中的一个实用方法,分享一下;

这个方法使用的是 vue 自定义指令,之前一直没咋用,最近研究了下发现很实用;

/* 自定义指令 */
    directives: {
      numberOnly: {bind: function(e) {e.handler = function() {e.value = e.value.replace(/\D+/, '')
          }
          e.addEventListener('input', e.handler)
        },
        unbind: function(e) {e.removeEventListener('input', e.handler)
        }
      }
    },
 <input 
     v-model="phone" 
     name="phone" 
     pattern="[0-9]*"  
     v-number-only 
     class="y_input" 
     type="tel" 
     maxlength="11" 
     placeholder="请输入手机号">

分享一下,也算是个笔记

正文完
 0