Есть ли способ связать значения <input type="range">
и <input type="number">
?
Я хотел бы внести изменения в ползунок или для числового ввода, чтобы оба поля были обновлены. По какой-то причине мне пока не удалось получить неопределенное значение из элемента range .
Вот мои текущие JavaScript и HTML для этой части документа:
function updateTextInput1(val) {
alert(val);
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
4 ответа
Это не работает, потому что updateTextInput1(this.val)
должно быть updateTextInput1(this.value)
:
function updateTextInput1(val) {
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
Однако я бы предложил использовать ненавязчивый JavaScript.
Просто прикрепите событие input
к каждому элементу. При этом оба элемента будут синхронизированы.
var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');
range.addEventListener('input', function (e) {
field.value = e.target.value;
});
field.addEventListener('input', function (e) {
range.value = e.target.value;
});
<input class="inputRange" type="range" min="0" max="100" value="0" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
Или вы можете использовать более компактный подход и выбрать элемент родного брата:
document.querySelector('.inputRange').addEventListener('input', updateValue);
document.getElementById('num1').addEventListener('input', updateValue);
function updateValue (e) {
var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
sibling.value = e.target.value;
}
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
Чтобы отображать каждый раз, когда диапазон или текст ввода изменяется, вы можете использовать oninput
и onchange
в диапазоне ввода, а также onkeypress
и onchange
в тексте типа ввода:
function updateTextInput1(val) {
val = val > 100 ? 100 : val;
val = val < 0 ? 0 : val;
document.getElementById('range').value = val;
document.getElementById('num1').value = val;
}
<input class="inputRange" id="range" type="range" min="0" max="100" oninput="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" onkeypress="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
Ошибка: this.val вместо this.value
function updateTextInput1(val) {
alert(val);
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
Вы должны связать событие, используя js / jq. И чтобы связать и то, и другое, вы можете нацелить определенный элемент родного брата (или любой другой соответствующий трансверсальный метод):
$('.inputRange, .inputNumber').on('input', function(){
$(this).siblings('.inputRange, .inputNumber').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.