input框只能输入[n,+∞)的正整数

527 阅读1分钟
<input
  type="text"
  oninput="
    if(value.length === 1) {
      value = value.replace(/[^0-9]/g, '0')
    } else {
      // 字符串'0000'、'00023'前加上加号+会变成数字0、23
      value = +value.replace(/\D/g, '')
      // 或者用正则:^(0+)
      value = value.replace(/^(0+)|\D/g,'')
      // 或者用parseFloat、parseInt也可以去除前面的000
      value = parseInt(value)
    }
	"
/>
// vue3 有变量
<input
  type="text"
  @input="inputChangeBagItemQty"
  v-model="inputValue"
/>

const inputChangeBagItemQty = (e: any) => {
  let value = e.target?.value;
  const n = 5;
  if(value.length === 1) {
    const reg = new RegExp("[^" + n + "-9]", "g");
    value = value.replace(reg, n);
  } else {
    // 字符串'0000'、'00023'前加上加号+会变成数字0、23
    value = +value.replace(/\D/g, '')
    // 或者用正则:^(0+)
    value = value.replace(/^(0+)|\D/g,'')
    // 或者用parseFloat、parseInt也可以去除前面的000
    value = parseInt(value)
  }
  // 防止:输入文字会多次触发oninput且有些时候value不存在或者等于0
  if(!+value) {
    value = n
  }
  inputValue.value = +value;
};