Улучшаем input для админ-панелей на JavaScript

Сегодня мы добавим улучшение в любую форму или админ панель где применяется input type="number". Если вы много работаете в админ панелях сайтов то знаете, что очень часто приходится вводить много информации в различные формы. Сделаем на JavaScript доработку input с числом, чтобы при прокрутке колесика мыши можно было менять числа в данном input (и да, в Photoshop есть подобная функция и она очень удобная).

Для начала создадим верстку:

<div>
  <input type="number" value = "0">
</div>
<div>
  <input type="number" value="100" step="10">
</div>

два input взяты специально, чтобы показать возможность работы с любым числом полей ввода на странице. Подключим JavaScript и для начала получим все input и повесим на них функцию.

const inputs  = document.querySelectorAll('input[type="number"]');

inputs.forEach(item => item.addEventListener('wheel', inputWheel));

function inputWheel(){}

Обратите внимание, событие wheel (onwheel) вызывает прокрутку страницы (ведь мы крутим колесо мыши) и нужно прокрутку, когда курсор находится над input - блокировать. Также, событие можно добавлять без перебора циклом, с помощью делегирования.

Для начала заблокируем прокрутку страницы:

function inputWheel(event){
  event.preventDefault();
}

Теперь будем изменять value инпута. Для этого получим инпут с которым работаем (this) и изменим его value:

function inputWheel(event){
  event.preventDefault();
  this.value = (+this.value)
}

Недостатки очевидны - код работает только на увеличение значения и шаг - всегда равен 1. Исправим первую проблему. В event есть свойство позволяющее понять направления вращения колесика мыши - event.deltaY. На основании этого можно исправить код так:

function inputWheel(event){
  if (event.deltaY > 0) {
    this.value = (+this.value) + 1;
  }
  else {
    this.value = (+this.value) - 1;
  }
}

Отлично. Теперь шаг изменения. В некоторые элементы input мы добавили атрибут step равный значению шага. Добавим в функцию код, позволяющий получить данный шаг. Если атрибута нет - шаг равен единице.

function inputWheel(event){
  let step = 1;
  if (this.getAttribute('step')) {
    step = +this.getAttribute('step');
  }

  if (event.deltaY > 0) {
    this.value = (+this.value) + step;
  }
  else {
    this.value = (+this.value) - step;
  }
}

Код готов. Его можно оптимизировать - посмотрите видео.

Просмотреть видео с этого урока: