Как сделать такой инпут?

Question

[1233211]

Подскажите, пожалуйста, как сделать такой input.
Нужно, чтобы % всегда были рядом с цифрами.

Comments

[maksam07]

Не совсем понятно что нужно. Чтобы внешний вид был как на картинке, или чтобы возле цифры был символ процента?

[Ankhena]

Инпут отдельно, % отдельно следом.
Как сделать инпут по ширине введенного текста погуглите, недавно тут был такой вопрос.

Либо не использовать инпут, заменить на span c contenteditable true.

Answer 1

[lolrofl01]

Тут инпут только там, где единица. Остальное - тупо поле со сверстанными процентом и кнопками вверх\вниз, которые работают через js. Так что решение простое, верстаете как на макете, затем позиционированием вставляете слева реальный инпут. И останется в js кнопочки активировать, чтоб верхняя брала значение инпута, добавляла +1 и вставляла в инпут, а нижняя делала тоже самое, только -1. Вот и вся задача. Главное проверку добавьте, чтобы при -1 ниже нуля не опускалось значение.

Comments

[Ankhena]

И останется в js кнопочки активировать

.. и ширину инпута посчитать в зависимости от количества и ширины введенных цифр.

Answer 2

[ksnk]

https://jsfiddle.net/wjg8oLsd/ Не то ?
функция вычисления размера инпута стырена со stackoverflow
P.S. Обновил решение

Comments

[Arty_Fact]

Работает умопомрачительно:

[ksnk]

Обновил.