vue限制只能输入数字_vue+element 中 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)"

>

保底转数

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)"

>

单价(元/转)

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)"

>

v-if="wage_scheme == 1 && price_mode ==1 || wage_scheme == 2 && price_mode ==1"

align="right"

width="87px"

>

保底工资

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)"

>

加机费

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)"

>

// 双向绑定 输入框(下布转数、保底转数、单价(元/转)、保底工资、加机费) - 限制输入

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这个参数是一行显示有多少个输入框

clothProduceData是表格绑定的值，也就是tableData