Вопрос:

Увеличение входного значения с помощью колесика мыши

javascript google-chrome input javascript-events mousewheel

2065 просмотра

1 ответ

4471 Репутация автора

Я пытаюсь увеличить / уменьшить значение поля ввода с помощью колесика мыши. Я собрал следующий код. Работает нормально, но есть небольшая проблема.

Мне нужно иметь возможность увеличивать / уменьшать входное значение с помощью колесика мыши, как только я сфокусируюсь на элементе. Мышь не должна зависать над элементом. Следующий код выполняет это. Но если я использую колесо при наведении на элемент ввода, значение увеличивается / уменьшается на 2 вместо 1.

var hoveredInput = null;

$('input[type="number"]').on("focus", function(e) {
  hoveredInput = this;
});
$('input[type="number"]').on("blur", function(e) {
  hoveredInput = null;
});

$(window).on("wheel", function(e) {
  if (hoveredInput) {
    if (e.originalEvent.deltaY < 0) {
      var currentValue = parseInt(hoveredInput.value, 10);
      var newValue = currentValue + 1;
      if (newValue > parseInt(hoveredInput.max, 10)) {
        newValue = hoveredInput.max;
      }
      hoveredInput.value = newValue;
    } else {
      var currentValue = parseInt(hoveredInput.value, 10);
      var newValue = currentValue - 1;
      if (newValue < parseInt(hoveredInput.min, 10)) {
        newValue = hoveredInput.min;
      }
      hoveredInput.value = newValue;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="0" min="0" max="255" />

После некоторых экспериментов я понял, что подобное поведение наблюдается для клавиш со стрелками вверх и вниз. Клавиши со стрелками вверх и вниз при вводе числа увеличивают / уменьшают значение. И я полагаю, это поведение противоречит моему коду. Заставляет его увеличиваться на 2, даже если код не выполняется дважды.


Я только что понял, что это может быть проблема Chrome. Chrome позволяет увеличивать / уменьшать входное значение числа с помощью колесика мыши, если вы фокусируете и наводите элемент. Тем не менее, это работает очень странным образом.

Если я просто добавлю <input type="number" />пустую страницу HTML, это увеличение колеса мыши не будет работать. Чтобы это работало, я просто добавляю window.onwheel = function() {};. Это не имеет никакого смысла. Также это, кажется, работает на JSFiddle и JSBin без onwheelназначения на window.


Возвращаясь к реальной проблеме, могу ли я отключить инкремент колеса мыши по умолчанию для элемента, чтобы я мог использовать свой собственный? Или есть другой подход, который я могу использовать?

Автор: akinuri Источник Размещён: 22.08.2016 09:30

Ответы (1)


2 плюса

22665 Репутация автора

Решение

Я не уверен, почему вы решили не использовать preventDefault()для предотвращения действия по умолчанию. Вы изменяете действие пользовательского интерфейса в этих условиях. Вы должны, конечно, использовать, preventDefault()чтобы предотвратить действие по умолчанию. Если вы не используете его, preventDefault()это может привести к неожиданным последствиям при использовании колеса прокрутки, когда он <input type="number">находится в фокусе. Без preventDefault()чего, какое сочетание неожиданных последствий произойдет в этих условиях, будет зависеть от браузера, который используется для просмотра страницы.

Я не могу продублировать конфликт с помощью клавиш курсора для изменения входного значения. Очевидно, что если все, что вы используете для ограничения минимальных и максимальных значений, <input>- это код колеса мыши, то эти ограничения не будут работать ни для какого другого метода ввода. Можно использовать minи maxатрибуты для предельных значений. Это было бы лучше по нескольким причинам, включая то, что это затрагивает все методы ввода значения и позволяет определять эти диапазоны <input>вместо одного набора ограничений для всех <input type="number">. Я изменил код, чтобы ваш код также использовал эти атрибуты.

Если вы сделаете это, вы можете рассмотреть возможность добавления стиля CSS, чтобы указать, что <input type="number">элемент имеет фокус. Это сделает для пользователя более понятным, почему колесо мыши не выполняет то, что они обычно ожидают от пользовательского интерфейса своего браузера.

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

Примечание:
Ваше использование focusи blurсобытий является чрезмерно сложным. Я изменил код, чтобы напрямую найти сфокусированный элемент, используя document.activeElement.

//Exclude one specific element for comparing this UI vs. the browser's default.
var excludedEl = document.getElementById('exclude');

$(window).on("wheel", function(e) {
  focusedEl = document.activeElement;
  if(focusedEl === excludedEl){
    //Exclude one specific element for UI comparison 
    return;
  }
  if (focusedEl.nodeName='input' && focusedEl.type && focusedEl.type.match(/number/i)){
    e.preventDefault();
    var max=null;
    var min=null;
    if(focusedEl.hasAttribute('max')){
      max = focusedEl.getAttribute('max');
    }
    if(focusedEl.hasAttribute('min')){
      min = focusedEl.getAttribute('min');
    }
    var value = parseInt(focusedEl.value, 10);
    if (e.originalEvent.deltaY < 0) {
      value++;
      if (max !== null && value > max) {
        value = max;
      }
    } else {
      value--;
      if (min !== null && value < min) {
        value = min;
      }
    }
    focusedEl.value = value;
  }
});
input[type="number"]:focus {
  box-shadow: 0px 0px 1.5px 1px cyan;
}

/*For comparing UIs: May conflict with browser default, or user's theme.*/
#exclude:focus {
  box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
NOTE: Events are only caught while the mouse stays within the test portion of the stackoverflow page:<br/><br/><br/>

Uses changed UI (if focused, mouse wheel will increment/decrement):<br/>
<input type="number" value="0" id="firstNumberInput" min="0" max="255"/>
<br/>Uses browser default UI:
<input id="exclude" type="number" value="0" min="0" max="255" style="display:block"/>

Автор: Makyen Размещён: 23.08.2016 12:08
Вопросы из категории :
32x32