Question

我很难在数字输入上禁用鼠标滚轮，因为用户在更新值后可能会错误地向下滚动。

我找到了这个链接： https://gist.github.com/pererinha/aaef044b021bbf7372e5

所以我在我的应用程序中添加了指令：

.directive('ignoreMouseWheel', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.bind('mousewheel', function (event) {
                var scrollAmount = event.originalEvent.wheelDelta * -1 + $document.scrollTop();
                event.preventDefault();
                $document.scrollTop(scrollAmount);
            });
        }
    }
});

它适用于Chrome，但在Firefox上，当我专注于某个字段时，如果我滚动，则会更新数字。

你能帮我禁用吗？

由于

Answer 1

WebKit桌面浏览器在数字输入（称为微调器）上添加了一些向下箭头。您可以插入CSS代码

turn them off visually like this:
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

请注意，仍然存在其他一些功能，例如能够通过鼠标上的滚轮增加数字。参见：https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

禁用数字输入上的鼠标滚轮

1 个答案: