解决input number类型上下滚动 禁用滚轮事件

1.去掉input在type="number"时的上下箭头

  

<style>
    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
    }
    input[type="number"]{
        -moz-appearance:textfield;
    }
</style>

2.禁用input数字滚轮事件

<input type="number" onmousewheel="stopScrollFun"  onDOMMouseScroll="stopScrollFun"/>

function stopScrollFun(evt) {
  evt = evt || window.event;
    if(evt.preventDefault) {
    // Firefox
      evt.preventDefault();
      evt.stopPropagation();
    } else {
      // IE
      evt.cancelBubble=true;
      evt.returnValue = false;
  }
  return false;
}

3.使用element-ui+vue时,在el-input加上@mousewheel.native.prevent来阻止鼠标滚动

<el-input type="number" @mousewheel.native.prevent />

如果还需要禁止上下箭头,则可采用以下方式

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
   -webkit-appearance: none !important;
   margin: 0;
}
input[type="number"]{-moz-appearance:textfield;}

原文地址:https://www.cnblogs.com/yuzihong/p/10212518.html

时间: 2024-11-05 14:41:56

解决input number类型上下滚动 禁用滚轮事件的相关文章

解决input,number类型的maxlength无效

使用input数字number类型的时候maxlength无效 假设需要控制输入数量为5,可以用以下方式: <input type="text"  maxlength="5" />   效果ok <input type="number"  maxlength="5" />  无效 改成这个: <input type="number" oninput="if(value

input type = number 去除上下箭头,禁用滚轮事件(默认的自带滚轮加减数字)

<style type="text/css"> /*盒子大小从边框开始计算*/ html * { box-sizing: border-box; } /*解决模态框抖动*/ html { overflow-y: scroll; -ms-overflow-style: none; } /* 隐藏滚动条 */ html::-webkit-scrollbar { display: none; } body { font-family: "Helvetica Neue&q

html5 input[number]类型输入非数字字符val()为“”和解决方案

html5新增的number输入类型会在input框获得焦点的时候呼起数字键盘,增加了体验的效果.但是在一些安卓机器上,还是能够切换道字符输入,用户也会不小心输入"+""-"之类的非数字字符.测试了一下,number类型是会自动忽略字母字符和其他非数字字符的,除了"+""-""."这两个字符可以输入,因为这两个是正负数和小数点的符号. number类型还有一个很坑的点是,如果输入框中的内容不是纯数字(正数,

如何让input number类型的标签不产生上下加减的按钮

之前用 input type="number" 来放数字框,发现有个上下加减的东西,感觉不太好 这个容易出现0 然后减为负数 这种情况下怎么去掉右边的那个上下加减的小按钮呢?前端同事告诉我加一点css就行了 <style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } </sty

Oracle number类型查询精度丢失的解决方法

Oracle number类型查询时,有时候会遇到精度丢失的问题,下面为您介绍了一个解决Oracle number类型查询精度丢失的方法,供您参考. 一.Oracle number类型查询需求中要求查到一个字段的值然后保持小数点后2位//如果采用如下方法从ResultSet得到一个数字,而这个数字大于40000,则得到的数据将不准确 floatzcxxhj+=rss.getFloat(3); //而如果采用double就没有问题 doublezcxxhj+=rss.getDouble(3); /

给Number类型增加加法、减、乘、除函数,解决float相加结果精度错乱的问题

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript

解决input[type=file]打开时慢、卡顿问题

为什么在input标签类型为file上传文件时在标签中设置属性 accpet="image/*",打开本地文件夹的速度特别慢? 经过测试发现,在mac里面safari.Firefox.Chrome(opera不知道为啥老闪退)都没有卡顿问题 在windows里面,Firefox不卡顿,只有Chrome卡顿. 于是我决定先去掉accpet试试……果然就没有了卡顿的问题.那么本包在试试accpet="image/jpg"果然也不卡卡的了!!看来问题的所在就是"

HTML5移动开发中的input输入框类型

HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型number 定义input类型为type="number"时,iOS显示数字.标点及符号键盘,Android显示拨号键盘.代码如下所示 1 <input type="number" id="number" name="number&quo

form表单input file类型的重置

我们知道form表单的dom中有一个reset方法,通过 document.getelemetbyid('yourform').reset()可以重置表单. Jquery对象没有reset方法,所以jquery的重置也是通过dom的reset方法完成,即 $('yourform')[0].reset() 对于form表单的input file类型的元素,在其他主流浏览器中通过form的reset方法完全可以重置 但是IE9以及以下对input file类型,reset无法重置.查了一些资料据说是