Предотвратить переключение текста в поле ввода ⇐ Html

[Anonymous]

Это мало в списке серьезных проблем, но я пытаюсь сделать входное окно ввода почтового индекса, в котором находится пограничное изображение под ним с пятью длинными хребтами, например, так: < /p>

< /code>
< /div>
< /div>
< /p>

Dead Simple, верно? Вот демонстрация Codepen < /p>

Я тщательно выровнял вход и изображение прямо под ним в CSS, так что, используя шрифт монопродажи, числа точно выровнялись с хэпами под ним Пятая цифра введена, в этот момент, хотя я установил MaxLength на 5, номера все сдвигают несколько пикселей влево. Вот видео о том, что я имею в виду, или вы можете увидеть его сами в ссылке Codepen. Есть идеи о том, как я могу предотвратить это поведение по умолчанию? Я пытался возиться с Keydown и предотвратить пузырь событий, но он не мешает браузеру перемещать текст-который возвращается в правильное место, когда вы теряете фокус.

Я бы также хотел бы, если бы курсор был выровнен над центром приборной Виды головных болей с кучей слушателей событий, чтобы переключить фокус на следующего брата на Keyup , переключиться на предыдущего брата на Backspace и в противном случае переписать все функциональность ввода.

обновление: я думал, что смогу решить это, немедленно вызывая .blur () Когда введен пяти цифр, но сдвиг все еще происходит в течение секунды. Полем Гах!

Подробнее здесь: https://stackoverflow.com/questions/454 ... -input-box