完美解决elementui input输入框 Number 类型 的坑（上下三角箭头，科学计数法 e，保留小数，整数） |
您所在的位置：网站首页 › 输入框不出来 › 完美解决elementui input输入框 Number 类型 的坑（上下三角箭头，科学计数法 e，保留小数，整数） |
|
首先要明确： 1、数字类型是一个int，有限定的位数，太大就失精了，因此，太长的数字用tel类型，短数字用Number。 2、输入框是给用户用的，可以限制用户输入，但是不能自动改用户已经输入的东西（一开始用正则做了个匹配小数点后几位的自动删除，用户体验不好） 遇到的问题： 1、使用Number的时候，会有上下箭头（不好看），并且滚轮可以滑动（正常页面就是滚轮滑的，不能一键多用），禁用这两个 2、输入（或复制黏贴进去）非数字的时候，虽然没输入，但是输入框中的光标闪动到左上角了，禁用这个 /deep/.el-input input::-webkit-outer-spin-button, /deep/.el-input input::-webkit-inner-spin-button { -webkit-appearance: none!important; } /deep/.el-input input[type="number"]{ -moz-appearance: textfield; } /deep/.el-input .el-input__inner { line-height: 1px!important; }3、输入太多会科学计数法，用html5原生属性oninput禁止输入，不进入vue的响应式，好用（注意这里用嵌套二元表达式）。 4、输入e，E，+，-，.，等数字符号，用@keydown.native禁用（注意这里用es6的箭头语法和includes语法）。 // 此例子是 允许输入小数点 整数最大3位 保留2位小数 // 2022-02-15更新：在更新了node版本之后居然发现不行了，问题出在οninput="value=value"，的时候，不能输入小数点，反而会光标弹回最前。不知道为啥会这样，但是可以避免，代码如下： //就是取消了value=value这个赋值，改为不做任何处理。如果是不用elmentui的innput。用html原生的input。仅需要把@keydown.native替换成onkeypress，onkeypress比@keydown.native更原生，所以写法有不同，写法如下 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |