J'ai un champ de saisie avec type "numéro", mais je souhaite ajouter des "jours" à l'intérieur de cette valeur de champ de saisie sans modifier la valeur réelle qui en sort.
<input type="number" class="days" (keyup)="valueChanged($event)"/>
3 Réponses :
Vous pouvez le faire quelque peu à moindre coût en collant simplement une portée après l'entrée et en appliquant une marge négative-droite à l'entrée: de cette façon de toucher vos données du tout et il reste purement cosmétique.
Vous pouvez positionner une plage absolue ou: après à la fin de l'entrée. Ceci est plus utile si vous connaissez cependant la longueur de l'entrée. Sinon, j'utiliserais JS pour calculer la largeur de l'entrée et l'ajouter.
p>
<div class="wrapper"> <input type="text" value="100"> </div>
Au lieu d'insérer l'unité dans l'entrée Pourquoi ne pas avoir de style d'entrée spécifique pour ces scénarios où vous pouvez ajouter ou préparer une unité. Quelque chose comme:
p>
<p>
<span class="unit-input">
<input class="unit-input__input" type="number">
<span class="unit-input__append">days</span>
</span>
</p>
<p>
<span class="unit-input">
<span class="unit-input__prepend">$</span>
<input class="unit-input__input" type="number">
</span>
</p>
<p>
<span class="unit-input">
<input class="unit-input__input" type="number">
<span class="unit-input__append">kg</span>
</span>
</p>
Prévoyez-vous auparavant savoir combien d'entiers l'utilisateur peut / utilisera?
La chaîne supplémentaire que vous souhaitez ajouter à la valeur doit simplement réexaminer dans un élément de fromage après la .