input中type="number”时候 maxlength失效解决方案

453 阅读1分钟

以以下计数器为例:

<el-input-number
  v-model="data.cond_effective_days"
  @change="handleChange"
  @input.native="onInput0_100"
  type="number"
  style="line-height: 30px"
  :min="1"
  label="描述文字"
></el-input-number>
 //针对领券当日起计数器进行校验
  onInput0_100(e: any) {
    // 验证是否是纯数字的正则:
    const isNumber: any = /^\d*$/.test(e.target.value);
    // 过滤非数字
    e.target.value = e.target.value
      .replace(/[^\d]/g, "")
      .replace(/^0{1,}/g, "");
  }

也可以在标签内就实现:

<input type="number" oninput="if(value.length>11)value=value.slice(0,11)" />

补充一点:

slice()定义和用法
slice() 方法可从已有的数组中返回选定的元素(截取,包头不包尾)。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不会改变原始数组。