elementui input 只能输入数字并且限制最大值

it2023-07-09  70

<el-input type="number" οninput="if(value.length>10)value=value.slice(0,10)" @keyup.enter.native="query()" onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))" :max="99999999"> </el-input>

 

oninput 是个自定义事件 在事件里面获取输入的数字长度,来进行判断如果大于规定长度就进行剪切。 keyup.enter.native 是个键盘回车事件,当按下Enter键时触发query()事件。 max为输入框的最大值,如果input的type=number那么输入框内是输入不了字符的。

number框 解决输入e的问题 主要原因是:e在数学上代表的是无理数,是一个无限不循环的小数,其值约为2.7182818284,所以在输入e的时候,输入框会把e当成一个数字看待。 可以采用下面的方式来避免这个BUG,在input标签中添加如下属性: onKeypress=“return(/[\d.]/.test(String.fromCharCode(event.keyCode)))”

<el-input placeholder="请输入密码" v-model="input" :show-password="true"></el-input> show-password 加上这个属性输入字符进行隐藏一般用于密码框使用

 

<el-table-column label="得分">

<template slot-scope="scope">

<div v-if="queryObj.isResult != undefined">{{scope.row.getDetailScore}}</div>

<div v-else>

<el-input

type="number"

size="small"

v-model.number="scope.row.getDetailScore"

@input="numberChange($event,scope.$index)"

@change="numberChange($event,scope.$index)"

></el-input>

</div>

</template>

</el-table-column>

js:

numberChange(val, index) {

let integer = /^(-|\+)?\d+$/; //输入整数(包括0)的正则,解决不能输入负号问题

if (integer.test(val)) {

if (this.tableData[index].thirdScore == 0) {

this.tableData[index].getDetailScore = parseInt(val);

} else {

this.tableData[index].getDetailScore = parseInt(val);

this.$nextTick(() => {

let newVal = Math.min(parseInt(val), this.tableData[index].thirdScore);

this.tableData[index].getDetailScore = newVal;

});

}

}

},

最新回复(0)