Анимационный текст в поле ввода

Question

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

Одна вещь, которую я не мог понять, - это как можно оживить текст в поле input. Поле input уже будет иметь значение само по себе, которое я хочу оживить.

Я могу анимировать текст с помощью анимации CSS для обычного текста, но это не работает для input. Пожалуйста, ознакомьтесь с this fiddle для текстовой анимации CSS. Если бы был способ анимации текста во вставке с помощью CSS, было бы предпочтительнее.

Таким образом, может кто-нибудь намекнуть или предложить мне какие-либо способы достижения того, чего я хочу?

Большое спасибо.

Answer 1

Итак, я думаю, вы, вероятно, ищете что-то вроде этого?

https://jsfiddle.net/bv9onx6x/16/

Это будет слушать для OnKeyPress, а затем JavaScript будет срабатывать и установить внутреннюю HTML нового <h1> на то, что значение в текстовом поле.

Answer 2

Вы можете попробовать с наложением над вашим входом и заполнить фактический текст ввода после окончания анимации некоторым скриптом java.

<div> 
    <input type="text" value="Some text"></input> 
    <span>Some text</span> 
</div> 

div{position:relative;} 
span { 
    ...your h1 stuff here... 
    position:absolute; 
    left:2px; 
} 
input {font: bold 200% Consolas, Monaco, monospace;} 

Answer 3

Я придумал логику javascript, которая анимирует определенный текст внутри текстового поля ввода. Надеюсь, что это ответ на ваш вопрос.

var value = "Typing animation"; 
value.split("").forEach(function(elem, index){ 
    setTimeout(function(){ 
    $("input[type='text']").val($("input[type='text']").val()+elem); 
}, index* 750); 
$("input[type=text]").focus(); 
}); 

Проверьте следующую скрипку.

JSFiddle