输入字段中的动画文本答案

【问题标题】：Animating text within the input field输入字段中的动画文本
【发布时间】：2015-06-04 06:05:36
【问题描述】：

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

我无法弄清楚的一件事是如何为input 字段中的文本设置动画。 input 字段本身已经有一个值，我想对其进行动画处理。

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

因此，有人可以提示或建议我如何实现我想要的任何方法吗？

非常感谢。

【问题讨论】：

标签： javascript css animation console

【解决方案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

【讨论】：

【解决方案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;}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：