element el-input type=number的时候隐藏上下箭头，并且禁止鼠标滚动改变值，禁止输入e

el-input，type = number 鼠标点击箭头增加减小数值，它的鼠标滚动也会如图：

两种方法，第一种正常的写：
第一种方法(有bug,可以输入e,第二种可以解决):

// 全局css 加上以下代码，可以隐藏上下箭头// 取消input的上下箭头
input::-webkit-inner-spin-button {-webkit-appearance: none !important;}input::-webkit-outer-spin-button{-webkit-appearance: none !important;}input[type="number"]{-moz-appearance: textfield;}

这时候又会发现一个问题，就是输入框我们鼠标滑动的的时候，它会改变input的值，如图：

解决方法:

//bug是可以输入e  第二种方法可以解决
<el-input v-model="amount" type="number"   @mousewheel.native.prevent@DOMMouseScroll.native.prevent>
</el-input>

第二种方法(完美解决,代码量也少,直接使用正则即可):

// 注意type类型是text
<el-input v-model="amount" type="text" @input="allNumber(amount)" >
</el-input><script>export default {data() {return {amount: '',}},methods: {allNumber(value) {value = value.replace(/[^\d]/g,""); //只能输入数字this.amount = value  //注意这里是string，你要数字类型记得自己转一下console.log(this.amount)}}};
</script>

element el-input type=number的时候隐藏上下箭头，并且禁止鼠标滚动改变值，禁止输入e相关推荐

去掉input type=“number“ 输入框内右侧上下箭头
需求: 原生input标签当type为number时,鼠标聚焦input框会在右侧会出现上下箭头调整数字的按钮,此时ui设计图要求去掉这个上下箭头解决方案在样式内写上如下代码: //谷歌 inpu ...
如何解决 input type=“number“出现上下箭头
jsp里面的样式代码: 如果input只可以输入数字那就改成input type="number" 然后会出现上下箭头用下面这个样式就会去掉 input::-webkit-ou ...
动手写个数字输入框1：input[type=number]的遗憾
前言最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...
解决input[type=number]无法显示非数字字符的问题
在移动端webview实现的页面中,有数字的地方必须使用input type="number"类型的input,否则触发后的键盘为全键盘,而非数字键盘.但另外的一个问题是,inpu ...
react input[type='number']
最近在写业务的时候遇到一个坑,当用户在 input[type='number'] 中输入 "01" 时,我将值设置为 1 ,但它不起作用,它仍显示 "01". ...
移除HTML5 input在type=number时的上下小箭头
在chrome下: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance ...
h5 android数字键盘,【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）...
在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头第一,首先想到额就是在VUX-UI中制定type=n ...
input在type=number时去右边上下箭头
html: <input type="number"> css: <style>input::-webkit-outer-spin-button,input ...
解决 html5 input type='number' 类型可以输入e
当给 input 设置类型为 number 时,比如,我想限制,只能输入 0-9 的正整数,正则表达式如下: /^[0-9]?$/ // 匹配 0-9 的整数且只匹配 0 次或 1 次用正则测试,小 ...

element el-input type=number的时候隐藏上下箭头，并且禁止鼠标滚动改变值，禁止输入e

element el-input type=number的时候隐藏上下箭头，并且禁止鼠标滚动改变值，禁止输入e相关推荐

最新文章

热门文章