Eingangstyp Bereich - Ausgabe auf Daumenfehler

Plötzlich hörte mein Code auf zu arbeiten, das Problem ist, dass ich den Bereichswert auf den Daumen des Bereichs ausgeben möchte.Eingangstyp Bereich - Ausgabe auf Daumenfehler

Hier ist mein Code:

<input id="slider1" type="range" min="5000" max="350000" step="1000" value="5000" name="beloeb" oninput="outputUpdate(value)" />

Js:

function outputUpdate(vol) { 
function formatNumber (num) { 
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.") 
} 
document.styleSheets[0].addRule('#slider1::-webkit-slider-thumb::before','content: "'+formatNumber(vol)+' DKK";'); 
}

Dies ist der Fehler, wenn Chrom in Konsole:

Uncaught Syntaxerror: Fehler 'addrule' auf ‚CSSStyleSheet auszuführen ': Fehler beim Parsen der Regel' # slider1 :: - webkit-slider-thumb :: before {Inhalt: "8.000 DKK"; } '.

Quelle

2016-04-12 Patrick Larsen

::-webkit-slider-thumb ist not a standard pseudo selector

Diese Funktion ist nicht-Standard und ist nicht auf eine Spur Standards. Verwenden Sie es nicht auf Websites, die mit dem Internet verbunden sind: Es funktioniert nicht für jeden Benutzer. Es kann auch zu großen Inkompatibilitäten zwischen den Implementierungen kommen und das Verhalten kann sich in Zukunft ändern.

Wenn Sie Ihren Code in CSS Validator überprüfen werden Sie so etwas wie haben:

::-webkit-slider-thumb is an unknown vendor extended pseudo-element

So wahrscheinlich eine neuere Version des Browsers stoppt die Eigenschaft unterstützen.

Es gibt keine Standardmethode, um dies mit CSS jetzt zu erreichen. Aber es einige nette Tools, die das gleiche Ergebnis mit divs implementieren/umspannt wie http://refreshless.com/nouislider/

Quelle

2016-04-12 17:56:59

gibt es einen anderen Weg, um den Wert hinzuzufügen der Bereich Daumen? –

@PatrickLarsen Ich sehe keine Standard-Cross-Browser unterstützt, um es einfach zu tun. Sie können diesen Artikel https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ überprüfen, ist aber keine gut unterstützte Funktion. –

Wie in Avraam's response erwähnt, die ::webkit-slider-thumb Stil ist Nicht-Standard und wird in jeder Art von Cross-Browser-Sinn nicht. Als Ergebnis kann die styleSheet.addRule() Funktion es nicht analysieren.

Sie in Erwägung ziehen könnte Javascript mit einem <style> Block zu erstellen, die den Stil enthalten sind Sie Targeting sind, wenn man nicht bereits in der aktuellen Seite existiert im Gegensatz es direkt mit dem Stylesheet hinzugefügt:

<script> 
    function outputUpdate(vol) { 
    // Create a style block 
    var style = document.createElement('style'); 
    // Set an ID for style and type 
    style.id = 'slider-rule'; 
    style.type = 'text/css'; 
    // If the style doesn't exist in the DOM... 
    if(!document.getElementById(style.id)){ 
     // Resolve the head section of the document 
     var head = document.head || document.getElementsByTagName('head')[0]; 
     // Style content 
     var content = '#slider1::-webkit-slider-thumb::before{ content: "'+formatNumber(vol)+' DKK";}'; 
     if (style.styleSheet){ 
      style.styleSheet.cssText = content; 
     } else { 
      style.appendChild(document.createTextNode(content)); 
     } 
     // Append this tag to the <head> section 
     head.appendChild(style); 
    } 
    } 

    function formatNumber (num) { 
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.") 
    } 
</script>

Dieses offensichtlich löst nicht die Cross-Browser betrifft, aber es wird den richtigen <style> Block zum DOM hinzufügen, wenn es nicht existiert:

Quelle

2016-04-12 19:34:41

Eingangstyp Bereich - Ausgabe auf Daumenfehler

Antwort

Verwandte Themen