Wertblasen für Bereichseingänge

Bereichseingänge in HTML sind wie folgt:

 <eingabe type="Bereich" name="Menge" min="1" max="10"></eingabe>

In Browsern, die sie unterstützen, sehen sie so aus:

Das ist großartig und alles. Sie können es für alles verwenden, wo Sie eine Zahl von einem Benutzer sammeln möchten, der über einen erzwungenen Mindest- und Höchstwert verfügt.

Aber etwas Seltsames bemerken? Allein diese Bereicheingabe kommuniziert dem Benutzer nicht, welche Nummer er tatsächlich einreicht. Wenn Ihre Input so etwas wie "Wie geht es dir? - In Ordnung, dann müssen Sie dem Benutzer wahrscheinlich keine Nummer anzeigen. Aber ich würde wetten, es ist häufiger, dass Sie die Nummer anzeigen müssen, als sie nicht anzeigen.

Um fair zu sein, heißt es in der Spezifikation:

Das Eingabeelement stellt eine Steuerung für die Einstellung des Wertes des Elements auf eine Zeichenfolge dar, die eine Zahl darstellt. Mit der Einschränkung, dass der genaue Wert nicht wichtig ist , lässt UAS eine einfachere Schnittstelle bereitgestellt als für den Zahlenzustand.

Aber komm schon, nur weil ein cooler Schieberegler nicht automatisch bedeutet, dass wir den Benutzer daran hindern sollten, den eingereichten Wert zu kennen. Ich würde nicht unbedingt sagen, dass Browser ihre UI -Kontrolle ändern sollten, um diese Zahl anzuzeigen. Ich sage, wir sollten das selbst bauen!

Dies ist der perfekte Anwendungsfall für das -Tag, das speziell für Werte gilt, die durch Formularelemente berechnet werden. Hier ist eine super einfache Implementierung, wie Sie es verwenden könnten:

 <eingabe type="Bereich" name="foo">
<output f ondinput="value = foo.valueasNumber;"> </output></eingabe>

Aktualisieren! Neue Version mit Vanilla JavaScript, die auch besser funktioniert.

Unser Ziel hier ist es, eine „Blase“ anzuzeigen, die den aktuellen Wert eines Bereichseingangs anzeigt.

Wenn Sie den Wert unserer „Blase“ aus dem Wert der Eingabe festlegen, müssen Sie den Bereichswert ziehen und in die Blase stecken:

 Range.addeventListener ("Eingabe", () => {
  bubble.innerhtml = rangel.value;
});

Der Trick besteht darin, die Blase entlang des Bereichs Eingang zu positionieren , damit sie neben dem „Daumen“ gleitet. Dazu müssen wir berechnen, welches % die Blase links gesucht werden muss. Lassen Sie uns also eine Funktion machen, um die Dinge als Smidge sauberer zu halten:

 Range.addeventListener ("Eingabe", () => {
  SetBubble (Bereich, Blase);
});

Funktion SetBubble (Bereich, Blase) {
  const val = Bereich.Value;
  const min = Bereich.min? Bereich.min: 0;
  const max = Bereich.max? Bereich.max: 100;
  const newval = nummer (((val - min) * 100) / (max - min));
  bubble.innerhtml = val;

  // Sorta Magic -Zahlen basierend auf der Größe des einheimischen UI -Daumens
  bubble.Style.left = newval = "%";
}

Hier stellen wir sicher, dass wir die Bereiche der Bereichseingänge min und max ausmachen und eine %-Position zwischen 0 bis 100 basierend auf dem aktuellen Wert in diesem Bereich berechnen. Nicht alle Bereiche sind die Standardzahlen von 0-100, so dass ein Bereich bei einem Wert von 0 bis 200 bei Wert von 50 betrug, was 25% des Weges sein würde. Dies erklärt das.

Aber es hat einen nervigen Fehler: Die Blase ist am Anfang zu weit nach links und am Ende zu weit rechts. Bei Range -Eingängen hängt der Daumen nicht von der linken Kante ab, so dass die Mitte am Anfang und am Ende ist. Wie eine Bildlaufleiste stoppen die Ränder des Daumens in der Strecke.

Wir können dort einige magische Zahlen verwenden, die über Browser anständig gut funktionieren:

 // Sorta Magic -Zahlen basierend auf der Größe des einheimischen UI -Daumens
  bubble.style.left = `calc ($ {newval}% ($ {8 - newval * 0.15} px))`;

Hier ist diese letzte Demo:

Ich war inspiriert, damit herumzustöbern, weil Leser MaxGloba mit ihrer Version schrieb, die ich hier posten werde:

Ein cooler Aspekt der Version von Max ist, dass der Bereichseingang CSS-Stil ist, sodass die genaue Größe des Daumens bekannt ist. Es gibt einige Zahlen, die sich in der JavaScript -Mathematik ziemlich magisch anfühlen, aber zumindest basieren sie auf realen Zahlen, die in der CSS über die Größe des Daumens festgelegt sind.

Andere Versionen

Dave Olsen portierte die (ursprüngliche) Idee, keine Abhängigkeit von JQuery zu haben. Hier ist diese Version:

Sean Stopnik:

Simurai:

Vincent Durand:

Vergessen Sie nicht, dass die Reichweite Datalisten haben können, die ihnen kleine Stufen setzen, was ein bisschen cool ist.

Ana Tudor verfügt über eine massive Sammlung, von denen viele den aktuellen Wert durch ihr Design anzeigen.

? Alte Version aus der Originalversion dieses Beitrags (JQuery, Plus funktioniert nicht auch nicht)

Wenn Sie dies nur aus historischen Gründen hier lassen.

Ziehen wir unseren Freund JQuery an und holen uns unser CSS an. Dieses Ziel ist unten. Jeder Bereich Eingabe, jederzeit, jeder min/max/Schritt - wir legen eine Blase darüber ein, die den aktuellen Wert zeigt.

Stylen wir zuerst das Ausgabelement. Wir werden es absolut über dem Eingang positionieren. Das gibt uns die Möglichkeit, auch den linken Wert anzupassen, sobald wir mit JavaScript herausgefunden haben, was er sein sollte. Wir werden es mit Gradienten und Grenzradius vorstellen und sogar ein kleines Zeigerdreieck mit einem Pseudoelement hinzufügen.

 Ausgabe { 
  Position: absolut;
  Hintergrund-Image: Linear-Gradient (oben, #444444, #999999);
  Breite: 40px; 
  Höhe: 30px; 
  Text-Align: Mitte; 
  Farbe: weiß; 
  Border-Radius: 10px; 
  Anzeige: Inline-Block; 
  Schriftart: BOLD 15px/30px Georgia;
  unten: 175%;
  links: 0;
  Margin -Links: -1%;
}
Ausgabe: nach { 
  Inhalt: "";
  Position: absolut;
  Breite: 0;
  Höhe: 0;
  Grenztop: 10px fest #999999;
  Border-Links: 5px fest transparent;
  Grenzrechte: 5px fest transparent;
  Oben: 100%;
  Links: 50%;
  Rand -Links: -5px;
  Rand: -1px;
}

Wir müssen nun alle Bereichseingänge beobachten, um sich zu ändern. Unser Ziel ist es, die linke Position der Blase in Tempo mit dem Schieberegler zu verschieben. Das ist nicht die einfachste Sache der Welt, dass Schieberegler von jeder Breite und einem minimalen oder maximalen Wert sein können. Wir müssen ein wenig Mathe machen. Hier ist alles, was Jquery JavaScript kommentiert hat:

 // Dom bereit
$ (function () {
 Var El, Newpoint, New Place, Offset;
 
 // Wählen Sie alle Bereichseingänge aus, achten Sie auf Änderung
 $ ("input [type = 'range']"). ändern (function () {
 
   // dies für die Effizienz durchspeichern
   el = $ (this);
   
   // Breite des Bereichs Eingabe messen
   width = el.width ();
   
   // herausfinden
   newPoint = (el.val () - el.attr ("min")) / (el.attr ("max") - el.attr ("min"));
   
   // Jankiger Wert, damit Zeiger besser ausgerichtet ist
   offset = -1,3;
   
   // verhindern, dass Blase über links oder rechts hinausgeht (nicht unterstützte Browser)
   if (newpoint  1) {newplact = width; }
   sonst {newplact = width * newpoint offset; offset -= newpoint; }
   
   // Blase bewegen
   El
     .Next ("Ausgabe")
     .css ({{
       Links: New Place,
       Marginleft: Offset "%"
     })
     .Text (el.val ());
 })
 // fälschen Sie eine Änderung, um die Blase beim Seitenladen zu positionieren
 .Tigger ('Änderung');
});

Der eine grobe Teil dort ist dieser Wert von 1,3. Ich habe versucht, die Spitze des Dreiecks der Blase mit der Mitte des Schiebereglers auszurichten. Es ist nicht einfach, denn das Zentrum des Schiebereglers ist nie zu 100% links oder rechts. Dieser Wert ist nicht perfekt oder perfekt implementiert, aber es ist besser als nicht zu haben.

Als Bonus erhalten Browser, die den Bereichseingang nicht unterstützen, immer noch die Bubble -Aktion.

Der obige Code hängt von den Bereichseingängen mit einem angegebenen min und maximalen Wert ab. Wenn sie es nicht tun, bricht es irgendwie. Ich denke, es wäre seltsam, einen Bereichseingang zu verwenden, ohne diese Dinge anzugeben. Wenn Sie dies nicht tun, scheinen sie standardmäßig auf 0 und 100 zu sein. Um dies zu kusterangen, greifen Sie jedes Attribut, testen Sie es und wenn es nicht richtig aussah, beheben Sie ihn. So etwas wie:

 var minvalue, maxValue;
if (! el.attr ("min")) {minValue = 0; } else {minvalue = el.attr ("min"); }

… Verwenden Sie dann die Minwert -Variable in der Mathematik. Und machen ähnlich für max. Wie auch immer, hier ist die Live -Demo:

Das obige ist der detaillierte Inhalt vonWertblasen für Bereichseingänge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!