Fügen Sie ein text-suffix <input type="number">

Ich derzeit haben eine Reihe von Eingaben wie diese:

<input type="number" id="milliseconds">

Dieses Eingabe-Feld wird verwendet zur Darstellung eines Wertes in Millisekunden.
Ich haben jedoch mehrere Eingänge, die einen Wert in dB oder Prozentwerten.

<input type="number" id="decibel">
<input type="number" id="percentages">

Was ich tun möchte, ist, eine Art suffix, um das Eingabefeld zu lassen Benutzer wissen, was für ein Wert die Eingabe darstellt. So etwas wie dieses:

Fügen Sie ein text-suffix <input type=

(Das Bild ist bearbeitet, um zu zeigen, was für ein Ergebnis ich haben will,ich versteckte die Pfeile nach oben und unten aus der input-Typ als auch).

Habe ich versucht zu Google, aber ich kann nicht scheinen, nichts zu finden darüber. Weiß jemand, ob das möglich ist, und wie Sie das erreichen können, so etwas wie dieses?

  • Sie das Gerät nur seitlich von der Eingabe (als text-node) ist keine option?
  • Versuchen placeholder w3schools.com/tags/att_input_placeholder.asp
  • Das wäre möglich, aber ich müsste redesign einige Teile von meinem UI, das würde ich gerne vermeiden, so viel wie möglich 🙂 . Aber wenn es unmöglich ist, so etwas zu tun würde ich habe keine andere Wahl.
  • Ich schaute auf diese und, obwohl es zeigt text an, wenn der Wert leer ist, ich noch bräuchte, das suffix nach dem ändern der Werte die Platzhalter nicht tun. Vielen Dank für Ihren Vorschlag, obwohl!
  • Wie haben Sie id spezifisch für jede Art von Einheiten, es ist viel mehr Chancen, dass Sie eine Javascript-Funktion würde den trick tun. Ich denke, Sie könnte verwenden number_format js Funktion durch das hinzufügen einer 5. parameter "Einheit". Wenn Sie nicht wollen, um die Javascript verwenden, dann wäre eine PHP-Funktion zu Ihnen passt ?
  • Vielen Dank für Ihren Vorschlag! Ich verwende Javascript in meine Bewerbung für das Holen der Werte und andere Arten von Daten aus meiner input-Felder. Obwohl dein Vorschlag ist gut, ich würde nur gerne wissen, wenn ich könnte, fügen Sie ein suffix, das eine Zahl-Eingabe-Feld. Dein Vorschlag würde meine Anwendung ein wenig zu kompliziert für so ein 'basic' - Funktion. Ich wäre besser der Neugestaltung meiner UI ein wenig 🙂 trotzdem Danke!
  • Sie sind herzlich willkommen ! Eine Javascript-Funktion ersetzen jedes "Anzahl" - Eingabe, da die id möglich war, nannte es, sobald die Seite geladen ist. Dann kann es verwendet werden, um Daten und Eingaben. Aber in der Tat die CSS-Lösung ist einfach perfekt.

InformationsquelleAutor R. De Caluwe | 2018-04-12
  1. 18

    Können Sie einen wrapper verwenden <div> für jedes input-element und positionieren Sie das Gerät so ein pseudo-element ::after mit der content Ihre entsprechenden Einheiten.

    Dieser Ansatz funktioniert gut für die absolut positionierten pseudo-Elemente wirken sich nicht auf den vorhandenen layouts. Trotzdem, der Nachteil dieses Ansatzes ist, dass Sie haben, um sicherzustellen, dass die Eingabe des Benutzers ist nicht so lange wie das Textfeld, sonst wird das Gerät unangenehm oben gezeigt. Für eine Feste Benutzer-Eingabe der Länge, es sollte funktionieren.

    CSS:

    /* prepare wrapper element */
div {
  display: inline-block;
  position: relative;
}

/* position the unit to the right of the wrapper */
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

/* move unit more to the left on hover
   for arrow buttons will appear to the right of number inputs */
div:hover::after {
  right: 1.5em;
}

/* set the unit abbreviation for each unit class */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.percent::after {
  content: '%';
}

    HTML:

    <div class="ms">
  <input type="number" id="milliseconds" />
</div>
<hr />
<div class="db">
  <input type="number" id="decibel" />
</div>
<hr />
<div class="percent">
  <input type="number" id="percentages">
</div>

    • Oh wow, ich habe tatsächlich nie darüber nachgedacht mit einem CSS-Lösung dafür, obwohl ich gerade realisiert, dass ich verwendet das CSS-tag in meiner Frage 🙂 Aber deine Lösung funktionieren würde, toll für dieses problem, da der Benutzer die Eingabe würde nie über einen Präfix Menge von Zeichen ( 2 oder 3 am meisten ). Ich danke Ihnen sehr für Ihren Vorschlag, markieren Sie diese als Antwort! 🙂
    • Nun, ich bin froh, dass ich helfen konnte!
    • Es ist ein content option in CSS, das ist toll, nicht wissen !
    • Hinzugefügt einen link zu MDN für das pseudo-element ::after. Für diejenigen Elemente, die Sie verwenden können, die content Regel.
    • Könnten Sie die Polsterung, um zu verhindern, dass der input-text von überschneidungen mit dem suffix-label. Oder, Sie können einen container gestylt als Eingabe-Feld (mit Rahmen und so) und ein input-element innerhalb der it ohne Grenzen.
    InformationsquelleAutor andreas
  2. 3

    Ein weiterer interessanter Ansatz wäre die Verwendung von ein wenig JavaScript, um zu machen suffix tatsächlich halten, um die Eingabe von text (die wahrscheinlich besser aussieht):

    JS:

    const inputElement = document.getElementById('my-input');
const suffixElement = document.getElementById('my-suffix');


inputElement.addEventListener('input', updateSuffix);

updateSuffix();

function updateSuffix() {
  const width = getTextWidth(inputElement.value, '12px arial');
  suffixElement.style.left = width + 'px';
}


/**
 * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
 * 
 * @param {String} text The text to be rendered.
 * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
 * 
 * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
 */
function getTextWidth(text, font) {
    //re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

    CSS:

    #my-input-container {
  display: inline-block;
  position: relative;
  font: 12px arial;
}

#my-input {
  font: inherit;
}

#my-suffix {
  position: absolute;
  left: 0;
  top: 3px;
  color: #555;
  padding-left: 5px;
  font: inherit;
}

    HTML:

    <div id="my-input-container">
  <input type="number" id="my-input" value="1500">
  <span id="my-suffix">ms.</span>
</div>

    Jedoch, dies ist nur ein proof-of-concept. Sie müssen es ein wenig weiter, um es vor der Serienreife, z.B. machen Sie eine wiederverwendbare plugin.

    Außerdem werden Sie brauchen, um einen Fall behandeln, wo input-element ist immer übergelaufen.

    InformationsquelleAutor Slava Fomin II
  3. 0

    Wenn Sie die option zum hinzufügen von Elementen zum Eingang, dann können Sie versuchen, diese:-

    <div class="container">
  <input type="text" id="milliseconds">
  <span class="ms">ms</span>
</div>

.container {
  max-width: 208px; /*adjust it*/
  margin: auto;
  position: relative;
  display: inline-block;
}

#milliseconds {
  padding-right: 35px;
}

.ms {
 position: absolute;
 top: 0;
 right: 10px;
}
    InformationsquelleAutor Akanksha Sharma
Schreibe einen Kommentar