Input type = "number" колесо мыши не прокручивается

Я не понимаю, почему колесико мыши не будет увеличивать/уменьшать значение в простом элементе формы.

<input type="number" step="0.125" min="0" max="0.875">

ОТВЕТЫ

Ответ 1

Фрагмент запускается в IFRAME. Поместите свой код в IFRAME, и он тоже будет работать. Почему - я не знаю, но это работает.

то есть.

http://codecorner.galanter.net/bla2.htm - не работает (код сам по себе) http://codecorner.galanter.net/bla.htm - работает - предыдущая страница в IFRAME

EDIT: здесь демонстрационная работа в Chrome 41: http://codecorner.galanter.net/bla_mousescroll.mp4

РЕДАКТИРОВАТЬ 2: Я думаю, что понял, и это не IFRAME. Чтобы произошло событие прокрутки, фактический контент должен быть прокручиваемым. Например, если вы повторите свой пример следующим образом:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <form action="" style="width:200px;overflow:scroll">
    <div style="width:300px">
            <input type="number" step="0.125" min="0" max="0.875">
    </div>
    </form>
</body>
</html>

где форма контейнера меньше его содержимого - DIV - прокручивающее колесо работает в поле чисел: http://codecorner.galanter.net/bla3.htm

Ответ 2

Итак, я думаю, что понял.

Сначала я скопировал ваш код в html-документ и открыл его в Chrome, и приращение не сработало. Во-вторых, я удалил все из кода, кроме поля ввода, все равно не работал.

Затем я ввел этот код на случайные сайты с помощью инспектора хрома, я попробовал его на gmail, reddit и на моем собственном веб-сайте. Gmail работал, reddit работал, но мой собственный сайт не работал.

Итак, я отключил javascript, и он нигде не работал.

Итак, чтобы ответить на ваш вопрос, stackoverflow/многие другие сайты используют javascript, который автоматически добавляет эту функциональность в числовые входы.

Ответ 3

Чтобы избежать проблемы с браузером в целом, вы можете попробовать использовать плагин jQuery mousewheel для ручного изменения вашего входного значения. Например:

index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="jquery.mousewheel.js"></script>
    <script type="text/javascript" src="scroll.js"></script>
</head>
<body>
    <form action="">
        <input id="myInput" type="number" step="0.125" min="0" max="0.875">
    </form>
</body>
</html>

scroll.js

$(function() {
    $('#myInput').on("mousewheel", function(event) {
        event.preventDefault();
        $this = $(this);
        $inc = parseFloat($this.attr('step'));
        $max = parseFloat($this.attr('max'));
        $min = parseFloat($this.attr('min'));
        $currVal = parseFloat($this.val());

        // If blank, assume value of 0
        if (isNaN($currVal)) {
            $currVal = 0.0;
        }

        // Increment or decrement numeric based on scroll distance
        if (event.deltaFactor * event.deltaY > 0) {
            if ($currVal + $inc <= $max) {
                $this.val($currVal + $inc);
            }
        } else {
            if ($currVal - $inc >= $min) {
                $this.val($currVal - $inc);
            }
        }
    });
});

Работает для меня как в Chrome, так и в Firefox. Событие mousewheel может быть запущено, когда мышь также витает над входом, а не только когда он выбран.