Отключить прокрутку на ` `

можно ли отключить колесо прокрутки, изменив число в поле ввода номера? Я перепутал с webkit-специфичным CSS, чтобы удалить spinner, но я хотел бы полностью избавиться от этого поведения. Мне нравится использовать type=number Так как он воспитывает хорошую клавиатуру на iOS.

9 80
javascript forms html css html5

9 ответов:

предотвратите поведение по умолчанию события mousewheel на элементах ввода-номера, как предложено другими (вызов "blur ()" обычно не является предпочтительным способом сделать это, потому что это не то, что хочет пользователь).

но. Я бы избегал прослушивания события mousewheel на всех элементах ввода-номера все время и делал это только тогда, когда элемент находится в фокусе (вот когда проблема существует). В противном случае пользователь не может прокрутить страницу когда мышь указатель находится в любом месте над входной элемент.

решение для 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('mousewheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('mousewheel.disableScroll')
})

(делегирование событий фокуса на окружающий элемент формы-чтобы избежать многих прослушивателей событий, которые плохо влияют на производительность.)

65
input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(event){ this.blur() })

http://jsfiddle.net/bQbDm/2/

для примера jQuery и кросс-браузерного решения см. связанный вопрос:

HTML5 прослушиватель событий для прокрутки ввода номера-только Chrome

16
$(document).on("wheel", "input[type=number]", function (e) {
    $(this).blur();
});
15

@Семен Перепелица

есть лучшее решение для этого. размытие удаляет фокус с входа, и это побочный эффект, который вы не хотите. Вы должны использовать evt.вместо этого метод preventDefault. Это предотвращает поведение ввода по умолчанию при прокрутке пользователем. Вот код:

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(evt){ evt.preventDefault(); })
12

один прослушиватель событий, чтобы управлять ими всеми

это похоже на ответ @Semyon Perepelitsa в чистом js, но немного проще, так как он помещает один прослушиватель событий на элемент документа и проверяет, является ли сфокусированный элемент числовым входом:

document.addEventListener("mousewheel", function(event){
    if(document.activeElement.type === "number"){
        document.activeElement.blur();
    }
});

если вы хотите отключить поведение прокрутки значения на некоторые поля, но не другим просто сделайте это вместо:

document.addEventListener("mousewheel", function(event){
    if(document.activeElement.type === "number" &&
       document.activeElement.classList.contains("noscroll"))
    {
        document.activeElement.blur();
    }
});

С этого:

<input type="number" class="noscroll"/>

если вход имеет класс noscroll он не будет меняться на прокрутке, в противном случае все останется прежним.

12

сначала вы должны остановить событие mousewheel либо:

  1. отключение его с помощью mousewheel.disableScroll
  2. перехватив его с e.preventDefault();
  3. путем удаления фокуса из элемента el.blur();

первые два подхода одновременно останавливают прокрутку окна, а последний удаляет фокус из элемента; оба из которых являются нежелательными результатами.

один обходной путь заключается в использовании el.blur() и перефокусировать элемент После a задержка:

$('input[type=number]').on('mousewheel', function(){
  var el = $(this);
  el.blur();
  setTimeout(function(){
    el.focus();
  }, 10);
});
5

Вы можете просто использовать 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()" />
2

предоставленные ответы не работают в Firefox (Quantum). Прослушиватель событий должен быть изменен с колесика мыши на колесо:

$(':input[type=number]').on('wheel',function(e){ $(this).blur(); });

этот код работает на Firefox Quantum и Chrome.

1
function fixNumericScrolling() {
$$( "input[type=number]" ).addEvent( "mousewheel", function(e) {
    stopAll(e);     
} );
}

function stopAll(e) {
if( typeof( e.preventDefault               ) != "undefined" ) e.preventDefault();
if( typeof( e.stopImmediatePropagation     ) != "undefined" ) e.stopImmediatePropagation();
if( typeof( event ) != "undefined" ) {
    if( typeof( event.preventDefault           ) != "undefined" ) event.preventDefault();
    if( typeof( event.stopImmediatePropagation ) != "undefined" ) event.stopImmediatePropagation();
}

return false;
}
0