Как сделать плавный набор текста в input?

Question

[Андрей Юрчук]

Что-то не могу нагуглить, как сделать анимированый набор текста в Input? То есть текст печатаеся не просто как на печатной машинке, а плавно. Есть ли какие-то CSS или JS способы так сделать? Можно и костыльные, но лучше без JQuery. Спасибо.

Comments

[Александр Маджугин]

А что значит "плавно" применительно к "текст печатается"?
Пример бы какой-нибудь или описание.

[Андрей Юрчук]

Александр Маджугин, по событию keyup, на инпуте, не просто добавлять символ в input, а добавить его с каким небудь переходом, как transition, только для появления текста

Answer 1

[Aetae]

Чтобы избежать головняка с contenteditable можно подложить стилизованный div под input с прозрачным текстом. Но это всё равно не будет просто, т.к. потребуется вычислять разницу состояний и анимировать именно по месту ввода.
Вот чисто концепт с анимацией только последнего символа:

Answer 2

[Александр Маджугин]

В инпате вы это не сделаете.
HTML позволяет управлять только видом отдельных элементов DOM. Символ в тексте это не элемент DOM, так что его придется в начале сделать таким.

Самый простой путь. Делаете input прозрачный поверх блока который имитирует поле ввода. При изменении текста в input сравниваете текст в нем и блоке его имитирующем. Диф этих текстов добавляете в блок обернутым в например span, с наброшенным на него любым эффектом. По завершении анимации заменяете этот span на его содержимое.

Как-то так.

Comments

[Андрей Юрчук]

Спасибо, за идею, все ясно

Answer 3

[Надим]

На input вы это не сделайте никак, так как невозможно применить CSS-эффекты к отдельным буквам в обычном тексте, но это возможно сделать, если бы каждая вводимая буква была бы внутри элемента span. В общем, вам поможет обычный div с атрибутом contenteditable="true" стилизованный под поле ввода.

Вам нужно написать JavaScript который по мере ввода текста будет оборачивать вводимые буквы в тег span с определенным классом, к этому классу вы позже уже сможете завязать любую какую угодно анимацию.