<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. javascript模块化编写

    目录: 1. 开篇语 2. 对象形式写法 3. 立即执行函数写法 4. prototype写法 5. 总结 1. 开篇语 现在我们写代码不再是一个人包办所有的活儿,都是在多人合作的情况下完成的.我们只 ...

  2. elasticsearch 集群的安装部署

    一 介绍 elasticsearch 是居于lucene的搜素引擎,可以横向集群扩展以及分片,开发者无需关注如何实现了索引的备份,集群同步,分片等,我们很容易通过简单的配置就可以启动elasticse ...

  3. activiti如何让业务对象和对应的流程关联

    如何让业务对象和对应的流程 关联? 发现ProcessInstance 有个方法getBusinessKey()可以得到一个businessKey. ProcessInstance 对应数据库中的表a ...

  4. 使用IDEA创建SpringBoot自定义注解

    创建SpringBoot项目 添加组织名 选择web 输入项目名称 创建后目录结构为 使用Spring的AOP先加入Maven依赖 <dependency> <groupId> ...

  5. tcp/ip学习笔记-TCP

    tcp/ip学习笔记-TCP 彭会锋 报文发送采用的是tcp_output函数,

  6. Exact Change

    设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) 作为第三个参数. cid ...

  7. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  8. C# 处理 JSON 常用的帮助类

    C#请求接口的方法,具体代码: 首先需要添加引用和第三方的组件,具体如下: 引用命名空间: using System.IO; using Newtonsoft.Json.Linq; using Sys ...

  9. ElementTree之Xml文档处理

    ElementTree: 表示整个XML层级结构 Element: 表示树形结构中所有的父节点 SubElement: 表示树形结构中所有的子节点 有些节点既是父节点,又是子节点 下面来看下这两个类的 ...

  10. Markdown_04_折叠语法

    目录 一.折叠语法 参考资料 一.折叠语法 主要使用的是 html5的 details标签 (1)示例如下: <details> <summary>折叠文本</summa ...