Jak odwrócić kierunek wprowadzania danych w zakresie HTML5?

Aby mieć suwak w języku HTML5, możemy użyć wejścia zakresu. tj.Jak odwrócić kierunek wprowadzania danych w zakresie HTML5?

<input type="range" min="0" max='5' value="0" step="1" >

Domyślnym zachowaniem jest posiadanie minimalnej wartości po lewej stronie i maksymalnej wartości po prawej stronie. Czy istnieje sposób, aby zamiast tego umieścić maksymalną wartość po lewej stronie?

Wiem, że mogę to zrobić z Javascriptem. Czy jest to możliwe w przypadku samego HTML?

Odpowiedz do "możliwy duplikat pytanie":

to pytanie zaakceptować rozwiązanie JavaScript i pytam dla HTML jedyne rozwiązanie. Myślę, że to oczywiste, że nie jest to duplikacja?

Źródło

2016-10-27 cytsunny

Możliwy duplikat [HTML5 zakresie input type z pozytywnej na negatywną] (http://stackoverflow.com/questions/27794439/html5-input-type-range- from-positive-to-negative) – Brad

To nie jest akceptowana odpowiedź, ale jest tu rozwiązanie CSS: http://stackoverflow.com/a/27794806/362536 – Brad

Może to rade: Ustawienie kierunku wejścia do być prawej do lewej na CSS

#reversedRange { 
    direction: rtl 
}

Zobacz przykładowy kod poniżej:

PS JavaScript/jQuery kodu jest tylko aby zilustrować zmieniające się wartości i nie jest potrzebne. Tylko CSS i atrybut id na elemencie input

Aktualizowane: w oparciu o komentarzach przez @ MCTaylor17 (dzięki)

$(function() { 
 
    $("#rangeValue").text($("#reversedRange").val()); 
 
    
 
    $("#reversedRange").on('change input', function() { 
 
    $("#rangeValue").text($(this).val()); 
 
    }); 
 
});

#reversedRange { 
 
    direction: rtl 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Max<input type="range" min="0" max='5' value="0" step="1" id="reversedRange">Min 
 
<div>value: <span id="rangeValue"></span> 
 
</div>

Źródło

2016-10-27 04:08:17 ochi

Przyjemna dla właściwości 'direction: rtl'. Nie czysty HTML, ale co najmniej znacznie lepszy niż te rozwiązania javascript. I przynajmniej jest wystarczająco krótki, aby umieścić w stylu inline. – cytsunny

Dobra sztuczka. FYI, jeśli dodasz "dane wejściowe" do zdarzeń (np. '.on (" zmień dane wejściowe ") to aktualizacja zostanie zaktualizowana w czasie rzeczywistym. – MCTaylor17

@ MCTaylor17 dzięki za wskazówkę, zaktualizowałem moją odpowiedź – ochi

To jest po prostu zrobić z CSS i czysty JavaScript. Mam nadzieję, że ten fragment Ci pomoże.

CSS & HTML

input{ 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
}

Max<input type="range" min="0" max='5' value="0" step="1" onmousemove="document.getElementById('Range_Value').innerHTML=this.value">Min 
 

 
<h3>Value: <span id="Range_Value">0</span></h3>

Źródło

2016-10-27 04:29:09

Jak odwrócić kierunek wprowadzania danych w zakresie HTML5?

Odpowiedz

Powiązane problemy