Покращуємо 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 взято спеціально, щоб показати можливість роботи з будь-якою кількістю 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;
   }
}

Код готовий. Його можна оптимізувати - перегляньте відео.

Переглянути відео з цього уроку: