Question

我正在开发一个JavaScript控制台，当用户键入命令并按下回车时，控制台会执行此操作。

我无法弄清楚的一件事是如何在input字段中制作动画文字。 input字段本身已经有一个值，我想要设置动画。

我可以使用CSS动画为普通文本设置动画文字，但这似乎不适用于input。请查看this fiddle以获取CSS文本动画。如果有一种方法可以使用CSS为输入中的文本设置动画，那么最好。

因此，有人可能暗示或建议我如何达到我想要的目的吗？

非常感谢。

Answer 1

我已经提出了一个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

Answer 2

所以我认为你可能正在寻找这样的东西？

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

这将听取onkeypress，然后JavaScript将触发并将新<h1>的内部html设置为文本框中的任何值。

Answer 3

您可以尝试使用覆盖输入，并在动画完成后使用某些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;}

在输入字段中设置动画文本

3 个答案: