Как добавить html в input?

Question

[Zombie42679]

Как реализовать такой input, чтоб если пользователь что-то вводил в него, то постоянно за числом справа была иконка, допустим fontawesome, ну нужно чтоб она была близко к цифре которую я ввёл ?

Answer 1

[Ankhena]

https://jsfiddle.net/2vrcbh3k/

<span contenteditable="true">0</span>

span {
  display: inline-block;
  min-width: 70px;
  outline: 1px solid #999;
}
span::after {
  display: inline-block;
  content: "i";
  width: 15px;
  height: 15px;
  line-height: 15px;
  background: skyblue;
  text-align: center;  
}

Answer 2

[Exploding]

Это не в инпут, а рядом с ним. Или псевдоэлементом или label-ом, или другой хренью любой.

Comments

[Zombie42679]

Если так добавить, он будет статичен вроде статичен, а мне надо чтоб он уходил вправо в зависимости от количества символов.

[Exploding]

Zombie42679, т.е. чтобы input растягивался тоже? или просто справа? м.б. имеется ввиду инпуту поставить text-align: right;?
В общем пример покажите какой-то где это реализовано.

[Exploding]

Zombie42679, в input нельзя добавить html, чтобы он обрабатывался так html

[Андрей]

В инпут нельзя добавлять html что бы он интерпретировался как html. У вас есть два варианта решения проблемы. Посмотреть в сторону атрибута contenteditable="true" и использовать обычный div.
Либо заморочиться с изобретением велосипеда. Сделать, что бы и инпут и символ(который должен быть за ним), были display: inline-block
А ширину инпута менять динамически в зависимости от введенного в него текста.
Вычислить ширину можно методом копирования этого текста в пустой спан(не видимый на странице) и вычислением его ширины, а потом задаванием этой ширины - инпуту.
Второй вариант это еще тот костыль. По этому юзайте contenteditable="true"