Я работаю над проектом, в котором мне нужно было синхронизировать значение слайдера со значением поля со списком.Казалось, код работает.Но я заметил кое-что странное, когда попробовал два элемента управления в Firefox.Я бы переместил ползунок и в процессе работы сосредоточился на комбобоксе.Затем я использовал клавиши со стрелками вверх / вниз на клавиатуре, и выбранный элемент двигался вверх / вниз, как и ожидалось.Но когда я переместил ползунок во второй раз и повторил использование клавиш со стрелками вверх / вниз, элемент, выбранный ползунком, был проигнорирован в пользу элемента, ранее выбранного клавишами.Я попробовал это на текущих версиях всех 5 основных браузеров и обнаружил, что такое поведение только в Firefox.Поэтому я удалил как можно больше постороннего кода, чтобы попытаться исключить ошибку с моей стороны. JSFiddle здесь .
Я сообщил об ошибке в Mozilla, думая, что обнаружил проблему с Firefox.Но ответ, который я получил, заключался в том, что проблема, с которой я столкнулся, исчезает при использовании простого старого javascript.Я использую jQuery 3.3.1.Я попробовал простой старый javascript и увидел, что проблема исчезла.Я также попробовал несколько более ранних версий (v2 и v1) jQuery и каждый раз получал вышеупомянутое поведение.Я думаю, прежде чем пытаться сообщить об этой проблеме в jQuery, я подумал, что могу спросить, выглядит ли мой существующий код в хорошем качестве, поскольку javascript вообще не является моей сильной стороной.Мне также интересно, есть ли способ заставить эту синхронизацию работать, не отказываясь от jQuery, который мне нужен для других целей.
Вот код ниже.Обратите внимание, что хотя этот код использует ввод диапазона в качестве ползунка, мой исходный код фактически использует ползунок пользовательского интерфейса jQuery.Именно с этим виджетом я впервые заметил проблему.Я вернулся к вводу диапазона, чтобы исключить возможный виновник jQuery UI.
Предполагая, что мой код исправен и что есть ошибка (jQuery или Firefox), может кто-нибудь предложить возможный обходной путь, чтобы избежать поведения, о котором я сообщаю?Любой совет приветствуется и приветствуется.
Спасибо, Крис
<script>
$(document).ready(function () {
$("#coarse_slider").change(function() {
$('#row_selector').val(this.value).trigger("focus");
});
$('#row_selector').change(function () {
$("#coarse_slider").val(this.value);
});
$('#row_selector').val(8).trigger("change").trigger("focus");
});
</script>
<div>
<input id="coarse_slider" type="range" value="5" step="1" max="19" min="0" />
</div>
<div>
<select size="20" name="row_selector" id="row_selector">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
<option value="7">G</option>
<option value="8">H</option>
<option value="9">I</option>
<option value="10">J</option>
<option value="11">K</option>
<option value="12">L</option>
<option value="13">M</option>
<option value="14">N</option>
<option value="15">O</option>
<option value="16">P</option>
<option value="17">Q</option>
<option value="18">R</option>
<option value="19">S</option>
<option value="20">T</option>
</select>
</div>