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

开发者依甜技术 2022年11月6日

0 收藏 702 点赞 1,044 浏览 934 个字

<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>