欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-04 11:13:20
...

<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 加上这个属性输入字符进行隐藏一般用于密码框使用

 

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

  2. <template slot-scope="scope">

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

  4. <div v-else>

  5. <el-input

  6. type="number"

  7. size="small"

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

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

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

  11. ></el-input>

  12. </div>

  13. </template>

  14. </el-table-column>

  15. js:

  16. numberChange(val, index) {

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

  18. if (integer.test(val)) {

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

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

  21. } else {

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

  23. this.$nextTick(() => {

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

  25. this.tableData[index].getDetailScore = newVal;

  26. });

  27. }

  28. }

  29. },