<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", Helvetica, Arial, sans-serif;

        font-size: 14px;

    }

    /* 去除webkit中input的type="number"时出现的上下图标 */

    input::-webkit-outer-spin-button,

    input::-webkit-inner-spin-button {

        -webkit-appearance: none;

    }

    input[type="number"] {

        -moz-appearance: textfield;

    }

</style>
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>禁止input输入框的鼠标滚轮事件</title>

        <script src="jquery.js"></script>

    </head>

    <body>

        <!-- 禁止谷歌浏览器、Opera浏览器以及360浏览器等采用谷歌内核的浏览器 -->

        <input type="number" id="inp1" onmousewheel="return false;">

        <!-- 禁止Firefox浏览器 -->

        <input type="number" id="inp2">

        <script>

            $("#inp2")[0].addEventListener('DOMMouseScroll', MouseWheel, false);

            function MouseWheel(event) {

                event = event || window.event;

                event.preventDefault();

            }

        </script>

    </body>

</html>

出自:https://www.cnblogs.com/lhl66/p/9164000.html

input type = number 去除上下箭头，禁用滚轮事件（默认的自带滚轮加减数字）的更多相关文章

  1. input type=number去掉上下箭头

    <input type="number" ...> <style> input::-webkit-outer-spin-button, input::-we ...

  2. CSS input type="number"出现上下箭头时解决方案

    input type="number"时录入内容不可控制,解决方案是在css中添加//火狐input[type=number] {      -moz-appearance:tex ...

  3. 去除input[type=number]最右边的spinners(默认加减符号)

    // 去掉input[type=number]默认的加减号 input[type='number'] { -moz-appearance:textfield; } input[type=number] ...

  4. 去除input[type=number]的默认样式

    input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, in ...

  5. 如何移除 input type="number" 时浏览器自带的上下箭头？

    Chrome 下 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: no ...

  6. 兼容IE7、IE8、IE9的input type="number"插件

    IE11版本好像才兼容input type="number",但是现在Win7版本操作系统下,很多人的IE版本都是IE7/8/9,所以为了体验就自己写了一个小插件,支持设置最大值. ...

  7. 输入类型<input type="number"> / input标签的输入限制

    输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...

  8. 去掉 input type="number" 右边图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. input[type=number]问题

    有时候对于只能输入数字的表单会有想要写成input[type=number]但是其中有一个问题 <input type="text" name="code" ...

随机推荐

  1. java代码实现递归

    think in java 书中使用递归分析 代码如下: public class Snake implements Cloneable { private Snake next; private c ...

  2. MySQLdb和PIL安装

    最近将个人博客部署到树莓派上海真是颇费周折,尤其是在MySQLdb和PIL的安装上 MySQLdb 先说Windows吧(比较简单) 直接pip安装即可或者下载编译版更方便:http://source ...

  3. [转载]各种java生成word解决方案的优缺点对比

    解决方案 优点 缺点 Jacob 功能强大 直接调用VBA接口,程序异常复杂:服务器必须是:windows系统+安装Office:服务器端自动化com接口容易产生死进程造成服务器宕机 Apache P ...

  4. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  5. 内存保护机制及绕过方法——利用Ret2Libc绕过DEP之ZwSetInformationProcess函数

    1.    DEP内存保护机制 1.1   DEP工作原理 分析缓冲区溢出攻击,其根源在于现代计算机对数据和代码没有明确区分这一先天缺陷,就目前来看重新去设计计算机体系结构基本上是不可能的,我们只能靠 ...

  6. python中time()时间的相关问题

    Python中time模块详解(转) 在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime以及calendar.这篇文章,主要讲解time ...

  7. qml 关于鼠标穿透的问题

    最近在开发过程中,遇到了鼠标穿透的问题.结合网上给予的方法,都试了一圈,在这里总结一下: import QtQuick 2.9import QtQuick.Window 2.2import QtQui ...

  8. L153

    警言是指传达一般真理或某种言论的短小句子.An aphorism is a short witty sentence which expresses a general truth or commen ...

  9. webpack 事件触发 按需加载

    比较易懂, 方法简单 var util_sync = require('./util-sync.js') alert(util_sync.data) document.getElementById(& ...

  10. 表单隐藏域与display:none

    有时候前端进行表单填写是分步骤的,每一步的时候其他步骤相关的表单视图不可见: 针对"不可见",以下有两种处理方式: ①display:none 这种方式呢,比较简单,就是将三个步骤 ...