it-swarm.com.de

Fügen Sie ein Text-Suffix zu <input type = "number"> hinzu

Ich habe derzeit eine Reihe von Eingaben wie diese:

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

Dieses Eingabefeld wird verwendet, um einen Wert in Millisekunden darzustellen. Ich habe jedoch mehrere Nummerneingaben, die einen Wert in dB oder Prozentangaben annehmen.

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

Was ich gerne tun würde, ist, ein Typ-Suffix in das Eingabefeld einzufügen, damit Benutzer wissen, welchen Wert die Eingabe darstellt. Etwas wie das:

 enter image description here

(Dieses Bild wird bearbeitet, um zu zeigen, welches Ergebnis ich haben möchte. Ich habe die Aufwärts- und Abwärtspfeile vor dem Eingabetyp ausgeblendet.).

Ich habe versucht, Google darauf hinzuweisen, aber ich finde anscheinend nichts darüber. Weiß jemand, ob dies möglich ist und wie Sie so etwas erreichen können?

5
R. De Caluwe

Sie können für jedes Eingabeelement einen Wrapper <div> verwenden und die Einheit als Pseudoelement ::after mit der content der entsprechenden Einheiten positionieren.

Dieser Ansatz funktioniert gut, da die absolut positionierten Pseudoelemente die vorhandenen Layouts nicht beeinflussen. Der Nachteil dieses Ansatzes ist jedoch, dass Sie sicherstellen müssen, dass die Benutzereingabe nicht so lang ist wie das Textfeld. Andernfalls wird die Einheit oben unangenehm angezeigt. Bei einer festen Benutzereingabelänge sollte es einwandfrei funktionieren.

/* 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: '%';
}
<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>

9
andreas

Ein anderer interessanter Ansatz wäre, ein wenig JavaScript zu verwenden, damit das Suffix tatsächlich am Eingabetext bleibt (was wahrscheinlich besser aussieht):

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;
}
#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;
}
<div id="my-input-container">
  <input type="number" id="my-input" value="1500">
  <span id="my-suffix">ms.</span>
</div>

Dies ist jedoch nur ein Proof of Concept. Sie müssen etwas weiter arbeiten, um es produktionsbereit zu machen, z. mache es zu einem wiederverwendbaren Plugin.

Außerdem müssen Sie einen Fall behandeln, in dem das Eingabeelement überläuft.

3
Slava Fomin II

Wenn Sie die Möglichkeit haben, Elemente zur Eingabe hinzuzufügen, können Sie Folgendes versuchen: -

<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;
}
0
Akanksha Sharma