마우스 휠로 input 숫자 값 변경하기

마우스 휠로 0 ~ 100까지 숫자 조절이 가능하게 하는 작업을 하게 되었다.

비록 취소되어 사용은 안했지만, 간단하게 검토하던 것을 적어두려고 한다!

처음에는 <input type="number"> 태그를 사용하여 간단히 작업하려고 했는데,

정책상 브라우저 호환에 문제가 있어서 <input type="text"> 태그로 작업을 진행하게 되었다.

 

HTML

<input id="target" type="text">

 

jQuery

// Firefox
$('#target').on('wheel', function(e){
   e.preventDefault();
   var num = $(this).val();
   
   if(e.originalEvent.deltaY < 0){
     if(num >= 100) return false;

     console.log('업');
   }else{
     if(num <= 0) return false;

     console.log('다운');
   }
});

// 그 외 브라우저
$('#target').on('mousewheel',function (e) {
      e.preventDefault();
      var num = Number($(this).val());

      if(e.originalEvent.wheelDelta > 0){
        if(num >= 100) return false;
		$(this).val(num + 1);
        console.log('업');
        
      }else{
        if(num <= 0) return false;
        $(this).val(num - 1);

        console.log('다운');
      }
});

Firefox만 스크롤 이벤트의 메서드가 약간 다르기때문에 분기하여 작성했다.

브라우저 체크 후 조건문으로 분기하는 작업이 필요하다.

 

Javascript

자바스크립트는 예제를 만들기 위해 작성하였기 때문에 크롬만 테스트를 했다.

const target = document.getElementById('target');

target.addEventListener('mousewheel',function (e) {
      e.preventDefault();
      var num = Number(this.value);
                       
      if(e.wheelDeltaY > 0){
        if(num >= 100) return false;
		this.value = num + 1 ;
        console.log('업');
        
      }else{
        if(num <= 0) return false;
		this.value = num - 1 ;
        console.log('다운');
      }
});

 

 

예제

See the Pen aRjgGO by leeyoonseo (@okayoon) on CodePen.