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>

出自:https://www.cnblogs.com/lhl66/p/9164000.html

posted @ 2018-08-22 08:50  抱臂柴  阅读(395)  评论(0编辑  收藏  举报