【问题标题】: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 将触发并将新 &lt;h1&gt; 的内部 html 设置为文本框中的任何值。

        【讨论】:

          猜你喜欢
          • 2010-11-24
          • 1970-01-01
          • 2019-03-24
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-02-07
          • 2017-05-21
          相关资源
          最近更新 更多