最近在项目中遇到的问题,就是多个输入框每个输入都有个范围,一开始的我在input的时候做,后面发现情况很多个,写多个函数代码太多了,维护也不方便,然后

55 阅读1分钟

1. input 输入 限制小数点 最大值或者最小值 默认整型

export const decimal = {
  inserted(el, binding) {
    const input = el.querySelector('input') || el;
    const precision = binding.arg || 2;
    const min = parseFloat(binding.value?.min) || -Infinity;
    const max = parseFloat(binding.value?.max) || Infinity;
    
    // 输入时处理
    input.addEventListener('input', function() {
      let value = this.value;
      
      // 清除非数字和小数点
      value = value.replace(/[^\d.-]/g, '');
      
      // 处理负数
      if (value.startsWith('-')) {
        value = '-' + value.slice(1).replace(/-/g, '');
      } else {
        value = value.replace(/-/g, '');
      }
      
      // 处理多个小数点
      const decimalIndex = value.indexOf('.');
      if (decimalIndex !== -1) {
        value = value.substring(0, decimalIndex + 1) + 
                value.substring(decimalIndex + 1).replace(/\./g, '');
      }
      
      // 限制小数点后的位数
      const parts = value.split('.');
      if (parts.length > 1) {
        parts[1] = parts[1].substring(0, precision);
        value = parts.join('.');
      }
      
      // 防止光标跳到末尾
      const start = this.selectionStart;
      const end = this.selectionEnd;
      this.value = value;
      this.setSelectionRange(start, end);
    });
    
    // 失去焦点时处理范围限制和补零
    input.addEventListener('blur', function() {
      let value = this.value;
      
      // 处理空值
      if (value === '' || value === '-') {
        return;
      }
      
      // 处理范围限制
      let numValue = parseFloat(value);
      if (isNaN(numValue)) {
        this.value = '';
        return;
      }
      
      if (numValue < min) {
        numValue = min;
      } else if (numValue > max) {
        numValue = max;
      }
      
      // 转换为字符串,不补零
      value = numValue.toString();
      
      // 如果有小数点但位数不足,不补零
      const decimalIndex = value.indexOf('.');
      if (decimalIndex !== -1) {
        const decimalPart = value.substring(decimalIndex + 1);
        if (decimalPart.length < precision) {
          value = value.substring(0, decimalIndex + 1 + decimalPart.length);
        }
      }
      
      this.value = value;
    });
  }
};    

如果大佬们发现有什么不同,希望给我一点点的意见。
还有之前大家都说我发布的代码都在一行之内,现在我才发现之前都是用的行内代码块,所以导致大家阅读不方便,在这里向各位码农大佬道歉啦