it-swarm.com.de

HTML5-Eingabetypbereich Zeigt den Wert des Bereichs an

Ich mache eine Website, auf der ich Range-Schieberegler verwenden möchte (ich weiß, dass nur Webkit-Browser unterstützt werden).

Ich habe es vollständig integriert und funktioniert gut. Ich möchte jedoch ein Textfeld verwenden, um den aktuellen Folienwert anzuzeigen.

Ich meine, wenn der Schieberegler anfangs den Wert 5 hat, so sollte er in Textfeld als 5 angezeigt werden, wenn ich die Folie schiebe, sollte sich der Wert in Textfeld ändern.

Kann ich dies nur mit CSS oder HTML tun? Ich möchte JQuery vermeiden. Ist es möglich?

84
Niraj Chauhan

Dies verwendet Javascript, nicht Jquery direkt. Es könnte helfen, Sie zu beginnen.

function updateTextInput(val) {
          document.getElementById('textInput').value=val; 
        }
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">

82
ejlepoud

Für diejenigen, die noch nach einer Lösung ohne separaten Javascript-Code suchen. Es gibt wenig einfache Lösung, ohne eine Javascript- oder Jquery-Funktion zu schreiben:

<form name="registrationForm">
   <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
   <output name="ageOutputName" id="ageOutputId">24</output>
</form>

JsFiddle Demo

Wenn Sie den Wert in einem Textfeld anzeigen möchten, ändern Sie einfach die Ausgabe in die Eingabe.


Update:

Es ist immer noch Javascript in Ihrer HTML geschrieben, Sie können die .__ ersetzen. Bindungen mit unterem JS-Code:

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
 }

Verwenden Sie entweder die ID oder den Namen des Elements. Beide werden in morden-Browsern unterstützt.

134
Rahul R.

version mit editierbarer Eingabe:

<form>
    <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
    <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>

http://jsfiddle.net/Xjxe6/

31
d1Mm

ein noch besserer Weg wäre, das Eingabeereignis an der Eingabe selbst abzufangen und nicht an der gesamten Form (leistungsmäßig):

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
       oninput="amount.value=rangeInput.value">                                                       

<output id="amount" name="amount" for="rangeInput">0</output>

Hier ist eine Geige (wobei die id per Kommentar von Ryan hinzugefügt wurde).

17
Ilana Hakim

Wenn Sie möchten, dass Ihr aktueller Wert unter dem Schieberegler angezeigt wird und mitbewegt wird, versuchen Sie Folgendes:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MySliderValue</title>

</head>
<body>
  <h1>MySliderValue</h1>

  <div style="position:relative; margin:auto; width:90%">
    <span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
    <span id="myValue"></span>
    </span>
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> 
  </div>

  <script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px =  ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);

  myValue.parentElement.style.left = px + 'px';
  myValue.parentElement.style.top = myRange.offsetHeight + 'px';
  myValue.innerHTML = myRange.value + ' ' + myUnits;

  myRange.oninput =function(){
    let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
    myValue.innerHTML = myRange.value + ' ' + myUnits;
    myValue.parentElement.style.left = px + 'px';
  };
  </script>

</body>
</html>

Beachten Sie, dass diese Art von HTML-Eingabeelement eine verborgene Funktion hat, z. B. wenn Sie den Schieberegler mit den Pfeiltasten nach links/rechts/nach unten/oben verschieben können, wenn das Element den Fokus hat. Dasselbe gilt für die Tasten Home/End/PageDown/PageUp.

12
drugan

Wenn Sie mehrere Folien verwenden und jQuery verwenden können, können Sie die folgenden Schritte ausführen, um mit mehreren Schiebereglern problemlos umzugehen:

function updateRangeInput(elem) {
  $(elem).next().val($(elem).val());
}
input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">

<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">

Wenn Sie oninput für den <input type='range'> verwenden, erhalten Sie Ereignisse, während Sie den Bereich ziehen.

4
Toni Almeida

<form name="registrationForm">
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
    <input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>

0
luis

Ich habe eine Lösung, die (Vanilla) JavaScript beinhaltet, aber nur als Bibliothek. Sie müssen es einmal einfügen und müssen dann nur noch das entsprechende source-Attribut für die Zahleneingaben festlegen.

Das Attribut source sollte der Selektor querySelectorAll des Bereichseingangs sein, den Sie abhören möchten.

Es funktioniert sogar mit Selectcs. Und es funktioniert mit mehreren Zuhörern. Und es funktioniert in die andere Richtung: Ändern Sie die Zahleneingabe und die Bereichseingabe wird angepasst. Und es wird auf Elementen funktionieren, die später auf der Seite hinzugefügt werden (überprüfen Sie https://codepen.io/HerrSerker/pen/JzaVQg dafür)

Getestet in Chrome, Firefox, Edge und IE11

;(function(){
  
  function emit(target, name) {
    var event
    if (document.createEvent) {
      event = document.createEvent("HTMLEvents");
      event.initEvent(name, true, true);
    } else {
      event = document.createEventObject();
      event.eventType = name;
    }

    event.eventName = name;

    if (document.createEvent) {
      target.dispatchEvent(event);
    } else {
      target.fireEvent("on" + event.eventType, event);
    }    
  }

  var outputsSelector = "input[type=number][source],select[source]";
  
  function onChange(e) {
    var outputs = document.querySelectorAll(outputsSelector)
    for (var index = 0; index < outputs.length; index++) {
      var item = outputs[index]
      var source = document.querySelector(item.getAttribute('source'));
      if (source) {
        if (item === e.target) {
          source.value = item.value
          emit(source, 'input')
          emit(source, 'change')
        }

        if (source === e.target) {
          item.value = source.value
        }
      }
    }
  }
  
  document.addEventListener('change', onChange)
  document.addEventListener('input', onChange)
}());
<div id="div">
  <input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
  <input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
  <br>

  <input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <br>
  
  <input name="example3" type="range" max="20" min="0" value="10" step="1">
  <select source="[name=example3]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
  </select>
  <br>
  
</div>
<br>
0
yunzen