Append a text to input field without changing its value? - html

Question

I have an input field with type "number", but I want to append text " days" inside that input field value without changing the actual value that comes out of it.
<input type="number" class="days" (keyup)="valueChanged($event)"/>
If the user changes the value, they should be able to change only the numerical value and the appended " days" is only visual addon to that field.
Is there a way to do it in CSS or TypeScript/JS?

Answer 1

Instead of inserting the unit into the input why not have a specific style of input for these scenarios where you can append or prepend any unit. Something like:
.unit-input {
border: #DFDFDF solid 1px;
display: inline-flex;
border-radius: 4px;
overflow: hidden;
font-family: sans-serif;
width: 10em;
}
.unit-input__input {
border: 0;
padding: .5em;
font-size: 1em;
width: 100%;
}
.unit-input__input:focus {
background: #EDFFFB;
outline: none;
}
.unit-input__prepend,
.unit-input__append {
background: #F4F4F4;
padding: .5em;
border: #DFDFDF solid 0;
flex-grow: 0;
}
.unit-input__prepend {
border-right-width: 1px;
}
.unit-input__append {
border-left-width: 1px;
}
<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>

Answer 2

You could do this somewhat cheaply by simply sticking a span after the input and applying a negative margin-right to the input:
<input type='number' style='margin-right: -10em;'><span>days</span>
That way you aren't touching your data at all and it remains purely cosmetic.

Answer 3

You could absolute position a span or :after at the end of the input. This is more useful if you actually know the length of the input however. Otherwise I would use JS to calculate width of the input and append it.
.wrapper {
display: inline-block;
border: 1px solid gray;
position: relative;
font-family: Arial;
font-size: 1rem;
}
.wrapper:after {
content: 'kg';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: .5rem;
pointer-events: none;
}
input {
width: 4rem;
padding: .5rem;
border: none;
box-sizing: border-box;
display: block;
font-size: 1rem;
}
<div class="wrapper">
<input type="text" value="100">
</div>