Hi community!
What would be the proper way to add a unit inside a number input?
The goal is not to add a span with a negative left margin to come over the input, but to really insert a non-editable unit directly after the number, adapting to the number length:
[....3€....]
[...333€...]
[..33333€..]
I've found this calculator to achieve this result quite elegantly, but can't figure how to get the same effect.
Any ideas?
First of all Don't use input of a type number for this one because it will not allow you to use currency symbol.
Now, create an input and listen for keypress. If it's a number or minus sign or a dot intert it before the symbol.
input.addEventListener('keypressed', event => {
const codes = [] // check the codes here https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
if (codes.includes(event.key)) return
input.value = input.value.slice(0, -1) + event.key // probably some mapping needed
})
The code above is an untested proof of concept