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

Posted lhl66

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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", 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>

 

以上是关于input type = number 去除上下箭头,禁用滚轮事件(默认的自带滚轮加减数字)的主要内容,如果未能解决你的问题,请参考以下文章

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

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

input type=number去掉上下箭头

移除input在type="number"时的上下箭头

input type=number 消除上下按钮的样式

移除HTML5 input在type="number"时的上下小箭头