Блог

Главная - Вопросы по программированию - как мгновенно вводить значение ползунка в поле ввода нескольких форм при каждом изменении?

как мгновенно вводить значение ползунка в поле ввода нескольких форм при каждом изменении?

#javascript #html

Вопрос:

В форме у нас есть три поля ввода с одинаковым значением, и эти поля отображаются, когда мы выбираем значение из выпадающего списка, например, если я выберу значение «2» из выпадающего списка, мы получим две строки с шестью полями ввода, три в первой строке и еще три во второй строке, и у нас есть ползунок диапазона . Когда ползунок поднимается, значение поля ввода должно быть увеличено на 0,5, а значение ввода по умолчанию равно 5. Проблема в том, что я не могу отобразить значение в поле ввода, когда я увеличиваю диапазон ползунка.

 function changeslider(val) {
  console.log(val)
  document.getElementById('slide1').value = val;
  document.getElementById('slide2').value = val;
  document.getElementById('slide3').value = val;
} 
 <div class="form-group">
     <label>No. of Rounds</label>
     <select class="form-control select2 select2-init" id="state_0" 
     name="Address">
     <option value="Select number rows">Select number rows</option>
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
     </select>
  </div>
    <input class="range" type="range" min="0" value="5" step="0.5" 
     id="myrange" onchange="changeslider(this.value);">

    <tbody id="tbody">
      <tr id="table_tr">
        <td><input type="text" class="form-control" id="slide1" name="round1[]" value="0" required></td>
        <td><input type="text" class="form-control" id="slide2" name="round2[]" value="0" required/></td>
        <td><input type="text" class="form-control" id="slide3" name="round3[]" value="0" required/></td>

      </tr>
    </tbody>

Ответ №1:

Изменить событие с onchange на oninput

onchange : Работает, когда вы изменили значение из input и фокус(удален щелчком мыши снаружи ввода или когда мышь выключена) удаляется из ползунка

oninput : Работает с каждым введенным значением независимо от того, изменилось ли фокусировка input (здесь ползунок) или нет

 function changeslider(val) {
  console.log(val)
  document.getElementById('slide1').value = val;
  document.getElementById('slide2').value = val;
  document.getElementById('slide3').value = val;
} 
 <input class="range" type="range" min="0" value="5" step="0.5" id="myrange" oninput="changeslider(this.value);">

<tbody id="tbody">
  <tr id="table_tr">
    <td><input type="text" class="form-control" id="slide1" name="round1[]" value="0" required></td>
    <td><input type="text" class="form-control" id="slide2" name="round2[]" value="0" required/></td>
    <td><input type="text" class="form-control" id="slide3" name="round3[]" value="0" required/></td>

  </tr>
Метки: