<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. jquery阻止冒泡和阻止默认事件

    event.stopPropagation(); event.preventDefault(); http://www.cnblogs.com/qixuejia/archive/2013/10/10/ ...

  2. 转载：Object的create方法文档

    源地址:https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/create#.E4.B ...

  3. Android--------工具类StatusBarUtil实现完美状态栏

    很早就想写这篇博客了,直到前几天有人问我这方面的问题才想起. 沉浸式状态栏是从android Kitkat(Android 4.4)开始出现的,顶部状态栏的颜色可以根据开发需求改变,使得APP风格更加 ...

  4. js判断回车，判断焦点控件

    document.onkeydown=function(event){        e = event ? event :(window.event ? window.event : null);  ...

  5. Linux 踩坑记录

    1. Linux系统上用火狐浏览器看视频的时候发现没有安装flash player插件,无法播放视频.简单几步安装插件,就可以快乐地使用linux系统看视频了. 步骤如下: 一.打开视频网站时提示无法 ...

  6. 关闭多个screen

    由于开了很多个screen同时工作,关闭是一个一个比较麻烦,写个命令在这以便日后想不起来时可以用到. 1.先看看有多少个screen    screen -ls |awk '/Socket/'|awk ...

  7. python高级内置函数和各种推导式的介绍：一行搞定的代码

    一.知识要点 all 都为真 any 有真的 min 最小的 max 最大的 sum 求和 reversed 反转 sorted 排序 zip 对应合并 [] 列表推倒式 () 生成器 {} 字典推倒 ...

  8. 【zzuli-2259】matrix

    题目描述 在麦克雷的面前有N个数,以及一个R*C的矩阵.现在他的任务是从N个数中取出 R*C 个,并填入这个矩阵中.矩阵每一行的法值为本行最大值与最小值的差,而整个矩阵的法值为每一行的法值的最大值.现 ...

  9. hdu4309

    题解: 暴力枚举 然后网络流 代码: #include<iostream> #include<cstdio> #include<cstring> using nam ...

  10. （MSSQL）sp_refreshview刷新视图失败及更新Table字段失败的问题解决

    在近期工作中遇到一个任务,需要批量更改散布在很多Table中的某字段,同时刷新相关视图,但是在执行脚本时,发现了如下问题 更新字段问题 消息 ,级别 ,状态 ,第 行 对象'View_Simple' ...