How to implement a dash between the characters in the input?

Hello. Please tell me how to implement such a dash in the input between characters5cf451545eb16611800940.png
March 23rd 20 at 18:50
1 answer
March 23rd 20 at 18:52
Solution


You clearly need in this embodiment to define the dimensions to clearly define the font etc. — to not have jumped. Well, to limit the length of input fields using JS.

UPDATE No. 1. The font should be monospaced.

UPDATE No. 2. There is a problem because of the letter-spacing from the last character in the input's e (scroll appears). Hack with a negative margin to the width of the letter-spacing will not work here. I only know one way to fix this — div as a wrapper and inside block with the same hack and contenteditable. Ie will need to adjust JS to get the data out. Here is all there is a simple script to limit the input in the symbol area, to understand the idea:

Find more questions by tags CSSHTML