動畫輸入字段內的文本

我正在開發一個JavaScript控制檯，當用戶輸入一個命令並按下回車鍵時，控制檯就會執行此操作。動畫輸入字段內的文本

我無法弄清的一件事是如何在input字段中設置動畫文字。 input字段本身已經有一個值，我想要動畫。

我可以使用CSS動畫爲普通文本創建動畫文本，但這似乎不適用於input。請檢查出this fiddle爲CSS文字動畫。如果有一種方法可以使用CSS爲輸入中的文本添加動畫效果，那將是更可取的。

因此，有人可以提示或建議我任何方式如何實現我想要的？

非常感謝。

來源

2015-06-04 Veo

所以我想你可能正在尋找這樣的東西？

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

也就是說要監聽onkeypress事件，然後JavaScript的火，並設置新<h1>的任何值是在文本內的HTML。

來源

2015-06-04 06:25:19 Kilenaitor

您可以嘗試在輸入上覆蓋一層，並在動畫完成後用一些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;}

來源

2015-06-04 06:27:16 puzzler

我想出了一個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

來源

2015-06-04 06:59:31

動畫輸入字段內的文本

回答

相關問題