Можно ли связать диапазон и числовой ввод HTML?

Question

Есть ли способ связать значения <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" />

javascript jquery html input

6

veryRandomMe 18 Дек 2015 в 20:00

Answer 1

Это не работает, потому что 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" />

8

Josh Crozier 18 Дек 2015 в 17:22

Answer 2

Чтобы отображать каждый раз, когда диапазон или текст ввода изменяется, вы можете использовать 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)" />

2

Arthur 18 Дек 2015 в 17:16

Answer 3

Ошибка: 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" />

2

Josh Crozier 18 Дек 2015 в 17:50

Answer 4

Вы должны связать событие, используя 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" />

1

A. Wolff 18 Дек 2015 в 17:09

Можно ли связать диапазон и числовой ввод HTML?

4 ответа

Похожие вопросы

Новые вопросы

javascript