<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. Kafka消息topic分区

      kafka是为分布式环境设计的,因此如果日志文件,其实也可以理解成消息数据库,放在同一个地方,那么必然会带来可用性的下降,一挂全挂,如果全量拷贝到所有的机器上,那么数据又存在过多的冗余,而且由于每 ...

  2. JSP 页面重定向

    当需要将文档移动到一个新的位置时,就需要使用JSP重定向了. 最简单的重定向方式就是使用response对象的sendRedirect()方法.这个方法的签名如下: public void respo ...

  3. 如何成为 Python 高手

    这篇文章主要是对我收集的一些文章的摘要.因为已经有很多比我有才华的人写出了大量关于如何成为优秀Python程序员的好文章. 我的总结主要集中在四个基本题目上:函数式编程,性能,测试,编码规范.如果一个 ...

  4. UVALive - 6712 lca+dfs序线段树

    题意:一棵树q次查询,每次查询给三个不同的点,要求计算到这三个点的比其他两个距离都要小的点数 题解:很明显的lca,倍增的找中点,关键是两个点的中点很好找,但是三个点不好找,我刚开始还准备分类讨论,后 ...

  5. 第九天 1-8 RHEL7软件包管理

    在RHEL7中,主要有 RPM 和 YUM 两种包管理 1.RPM包管理--使用rpm命令对rpm软件包进行管理rpm命令格式:[有很多,自己可以man一下,这里只列举一下常用的]rpm -ivh [ ...

  6. HDU 5699 二分+线性约束

    http://acm.hdu.edu.cn/showproblem.php?pid=5699 此题满足二分性质,关键在于如何判断当前的时间值可以满足所有的运送方案中的最长的时间. 对于每一次枚举出的k ...

  7. Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图

    Highcharts 丢失值区域图 chart 配置 将 chart 的 spacingBottom 属性设置为 30.表示图表间的间隔区间. var chart = { type: 'area', ...

  8. BOM-event事件

    添加事件监听 <button id="btnShoot">shoot</button><br> <button id="btnA ...

  9. Java开发微信公众号模板消息【同步|异步】

    第一步:申请模板消息功能并添加模板 在微信公众平台找到你需要的模板,并添加上即可: 第二步:添加功能模块后开始开发 功能中使用的类及代码: 发送数据主实体类: Template.java packag ...

  10. 35-THREE.JS 多面体

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...