입력 번호 필드의 번호를 변경하는 스크롤 휠을 비활성화 할 수 있습니까? 스피너를 제거하기 위해 웹킷 관련 CSS를 엉망으로 만들었지 만이 동작을 모두 제거하고 싶습니다. type=numberiOS에서 멋진 키보드가 나오기 때문에 사용 하는 것이 좋습니다.
답변
다른 사람들이 제안한 것과 같이 입력 번호 요소에서 마우스 휠 이벤트의 기본 동작을 방지합니다 ( “blur ()”호출은 일반적으로 사용자가 원하는 것이 아니기 때문에 선호하는 방법이 아닙니다).
그러나. 항상 모든 input-number 요소에서 mousewheel 이벤트를 수신하지 않고 요소에 초점이 맞춰져있을 때만 수행합니다 (문제가 존재하는 경우). 그렇지 않으면 마우스 포인터가 input-number 요소 위에있을 때 사용자가 페이지를 스크롤 할 수 없습니다 .
jQuery 솔루션 :
// disable mousewheel on a input number field when in focus
// (to prevent Cromium browsers change the value when scrolling)
$('form').on('focus', 'input[type=number]', function (e) {
$(this).on('wheel.disableScroll', function (e) {
e.preventDefault()
})
})
$('form').on('blur', 'input[type=number]', function (e) {
$(this).off('wheel.disableScroll')
})
(포커스 이벤트를 주변 양식 요소로 위임-성능에 좋지 않은 많은 이벤트 리스너를 피하십시오.)
답변
$(document).on("wheel", "input[type=number]", function (e) {
$(this).blur();
});
답변
모두를 지배하는 하나의 이벤트 리스너
이것은 순수한 js에서 @Simon Perepelitsa 의 대답 과 비슷 하지만 문서 요소에 하나의 이벤트 리스너를 놓고 포커스가있는 요소가 숫자 입력인지 확인하므로 조금 더 간단합니다.
document.addEventListener("wheel", function(event){
if(document.activeElement.type === "number"){
document.activeElement.blur();
}
});
일부 필드 에서 값 스크롤 동작을 끄고 싶지만 다른 필드에서는 끄려면 대신 다음을 수행하십시오.
document.addEventListener("wheel", function(event){
if(document.activeElement.type === "number" &&
document.activeElement.classList.contains("noscroll"))
{
document.activeElement.blur();
}
});
이것으로 :
<input type="number" class="noscroll"/>입력에 noscroll 클래스가 있으면 스크롤시 변경되지 않으며 그렇지 않으면 모든 것이 동일하게 유지됩니다.
여기에서 JSFiddle로 테스트
답변
input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(event){ this.blur() })
jQuery 예제 및 크로스 브라우저 솔루션은 관련 질문을 참조하십시오.
답변
HTML onwheel 속성을 사용하기 만하면됩니다 .
이 옵션은 페이지의 다른 요소를 스크롤하는 데 영향을주지 않습니다.
그리고 모든 입력에 대한 리스너를 추가하면 사후에 동적으로 생성 된 입력에서 작동하지 않습니다.
Aditionaly, CSS를 사용하여 입력 화살표를 제거 할 수 있습니다.
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}<input type="number" onwheel="this.blur()" />답변
@Semyon Perepelitsa
이것에 대한 더 나은 해결책이 있습니다. 블러 는 입력에서 초점을 제거하고 원하지 않는 부수적 인 영향입니다. 대신 evt.preventDefault를 사용해야합니다. 이것은 사용자가 스크롤 할 때 입력의 기본 동작을 방지합니다. 다음은 코드입니다.
input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(evt){ evt.preventDefault(); })
답변
먼저 다음 중 하나를 수행하여 마우스 휠 이벤트를 중지해야합니다.
- 다음으로 비활성화
mousewheel.disableScroll - 가로 채기
e.preventDefault(); - 요소에서 초점을 제거하여
el.blur();
처음 두 가지 방법은 창 스크롤을 중지하고 마지막 두 가지 방법은 요소에서 포커스를 제거합니다. 둘 다 바람직하지 않은 결과입니다.
한 가지 해결 방법은 el.blur()지연 후 요소 를 사용 하고 다시 초점을 맞추는 것입니다.
$('input[type=number]').on('mousewheel', function(){
var el = $(this);
el.blur();
setTimeout(function(){
el.focus();
}, 10);
});