vue+element 中 el-input框 限制 只能输入数字及几位小数(自定义)和输入框之键盘事件(向下、向上)

 

      <!-- 下布转数 -->
      <el-table-column align="right" width="87px">
        <template slot="header" slot-scope="scope">
          <span class="sort-table-header">下布转数</span>
        </template>
        <template slot-scope="scope">
          <div>
            <el-input
              v-model="scope.row.revolutions_count"
              placeholder="请输入"
              size="mini"
              class="align-right-input count_input table_input"
              @input="changeSalary(scope.row,scope.$index,'revolutions_count')"
              @keyup.native="keyboard($event, scope.$index)"
            ></el-input>
          </div>
        </template>
      </el-table-column>

      <!-- 保底转数 -->
      <el-table-column v-if="wage_scheme != 3" align="right" width="87px">
        <template slot="header" slot-scope="scope">
          <span class="sort-table-header">保底转数</span>
        </template>
        <template slot-scope="scope">
          <div>
            <el-input
              v-model="scope.row.overproduction"
              placeholder="请输入"
              size="mini"
              class="align-right-input over_input table_input"
              @input="changeSalary(scope.row,scope.$index,'overproduction')"
              @keyup.native="keyboard($event, scope.$index)"
            ></el-input>
          </div>
        </template>
      </el-table-column>

      <!-- 单价(元/转) -->
      <el-table-column v-if="wage_scheme != 3 || price_mode !=0" align="right" width="87px">
        <template slot="header" slot-scope="scope">
          <span class="sort-table-header">单价(元/转)</span>
        </template>
        <template slot-scope="scope">
          <div>
            <el-input
              v-model="scope.row.revolution_price"
              placeholder="请输入"
              size="mini"
              class="align-right-input revolution_input table_input"
              @input="changeSalary(scope.row,scope.$index,'revolution_price')"
              @keyup.native="keyboard($event, scope.$index)"
            ></el-input>
          </div>
        </template>
      </el-table-column>

      <!-- 保底工资 -->
      <el-table-column
        v-if="wage_scheme == 1 && price_mode ==1 || wage_scheme == 2 && price_mode ==1"
        align="right"
        width="87px"
      >
        <template slot="header" slot-scope="scope">
          <span class="sort-table-header">保底工资</span>
        </template>
        <template slot-scope="scope">
          <div>
            <el-input
              v-model="scope.row.knit_loom_price"
              placeholder="请输入"
              size="mini"
              class="align-right-input knit_input table_input"
              @input="changeSalary(scope.row,scope.$index,'knit_loom_price')"
              @keyup.native="keyboard($event, scope.$index)"
            ></el-input>
          </div>
        </template>
      </el-table-column>

      <!-- 加机费 -->
      <el-table-column v-if="wage_scheme == 1 && price_mode ==1" align="right" width="87px">
        <template slot="header" slot-scope="scope">
          <span class="sort-table-header">加机费</span>
        </template>
        <template slot-scope="scope">
          <div>
            <el-input
              v-model="scope.row.add_machine_reward"
              placeholder="请输入"
              size="mini"
              class="align-right-input add_input table_input"
              @input="changeSalary(scope.row,scope.$index,'add_machine_reward')"
              @keyup.native="keyboard($event, scope.$index)"
            ></el-input>
          </div>
        </template>
      </el-table-column>

 

 

　　// 双向绑定 输入框（下布转数、保底转数、单价(元/转)、保底工资、加机费） - 限制输入
    changeSalary(row, index, type) {
      this.$nextTick(() => {
        // 先把非数字的都替换掉(空)，除了数字和.
        this.clothProduceData[index][type] = this.clothProduceData[index][
          type
        ].replace(/[^\d.]/g, "");
        // 必须保证第一个为数字而不是.
        this.clothProduceData[index][type] = this.clothProduceData[index][
          type
        ].replace(/^\./g, "");
        // 保证只有出现一个.而没有多个.
        this.clothProduceData[index][type] = this.clothProduceData[index][
          type
        ].replace(/\.{3,}/g, "");
        // 保证.只出现一次，而不能出现两次以上
        this.clothProduceData[index][type] = this.clothProduceData[index][type]
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        // 限制几位小数
        let subscript = -1;
        for (let i in this.clothProduceData[index][type]) {
          if (this.clothProduceData[index][type][i] === ".") {
            subscript = i;
          }
          if (subscript !== -1) {
            if (i - subscript > this.decimalNum(type)) {
              this.clothProduceData[index][type] = this.clothProduceData[index][
                type
              ].substring(0, this.clothProduceData[index][type].length - 1);
            }
          }
        }
      });
    },
    // 下布转数、保底转数：整数;单价(元/转):4位小数; 保底工资、加机费：2位小数
    decimalNum(type) {
      if (type == "revolutions_count" || type == "overproduction") {
        return -1;
      }
      if (type == "revolution_price") {
        return 4;
      }
      if (type == "knit_loom_price" || type == "add_machine_reward") {
        return 2;
      }
    },

 

 

　　// 键盘事件(向上、向下)
    keyboard(evt, index) {
      let newIndex;
      let _this = this;
      let ev = evt ? evt : window.event;
      let clssName = ev.target.offsetParent.className;
      if (clssName.indexOf("count_input") != -1) {
        newIndex = index * this.paramNum;
      } else if (clssName.indexOf("over_input") != -1) {
        newIndex = index * this.paramNum + 1;
      } else if (clssName.indexOf("revolution_input") != -1) {
        let num = this.paramNum === 2 ? 1 : 2;
        newIndex = index * this.paramNum + num;
      } else if (clssName.indexOf("knit_input") != -1) {
        newIndex = index * this.paramNum + 3;
      } else if (clssName.indexOf("add_input") != -1) {
        newIndex = index * this.paramNum + 4;
      }
      // 获取每一列input
      let inputAll = document.querySelectorAll(".table_input input");
      let allLength = inputAll.length;
      // 向上
      if (ev.keyCode == 38) {
        if (newIndex <= this.paramNum - 1) {
          return false;
        } else {
          newIndex -= this.paramNum;
        }
        if (inputAll[newIndex]) {
          inputAll[newIndex].focus();
        }
      }
      // 向下
      if (ev.keyCode == 40) {
        if (newIndex >= allLength - this.paramNum) {
          return false;
        } else {
          newIndex += this.paramNum;
        }
        if (inputAll[newIndex]) {
          inputAll[newIndex].focus();
        }
      }
    },

因为那五个字段是判断显示的，相应的，paramNum这个参数是一行显示有多少个输入框

 

 

如下是我在另一个页面写的，只能输入正整数，并限制数字大小的：

    // 双向绑定 - 限制输入
    changeSalary(type) {
      this.$nextTick(() => {
        // 只能输入正整数，包括 0
        this[type] = this[type].replace(/^0(0+)|[^\d]+/g, "");
        // 第一位为0，输入第二位时把第一位的0去掉
        if (this[type].length >= 2) {
          for (let i in this[type]) {
            if (this[type][0] == 0) {
              this[type] = this[type].substring(1);
            }
          }
        }
        // 最大值99999，超出恢复99999(停机时长过滤秒数)
        if (this[type] > 99999 && type == "secondNumber") {
          this[type] = "99999"; // 如果是number类型会报错
        }
        if (this[type] > 100 && type == "opacityNumber") {
          this[type] = "100"; // 如果是number类型会报错
        }
      });
    },
    // 输入框是去焦点时，如果是空的，默认0
    resetempty(type) {
      if (!this[type]) {
        this[type] = "0";
      }
    },

 

 

参考文档：https://www.cnblogs.com/zm-97/p/12076892.html