将用户的输入复制为Javascript中的键入效果

Question

我正在尝试从用户输入中捕获一个句子并将其复制为打字效果。 我正在使用JavaScript执行任务。

我能够捕获输入并使用console.log()显示它，但是当我添加打字效果功能时，它似乎不起作用。

我的代码如下。 怎么了

 var getInput = document.getElementById("input"); getInput.onkeyup = function(e) { if (e.keyCode == 13) { var i = 0; var text = input.value; function typing() { if (i < text.length) { document.getElementById('output').innerHTML += text.charAt(i); i++; setTimeout(typeWriter, 200); } } e.currentTarget.value = ""; } }

 <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet"> <div class="background"></div> <div class="input"></div> <div class="typing"> <div class="input-group"> <div class="form-group"> <label for="text">Please Type Here:</label> <input type="text" class="form-control" id="input"> </div> </div> </div> <div class="output" id="output"> </div>

Answer 1

您已经定义了typing函数，但尚未调用它。

另外，在setTimeout ，您调用了typeWriter函数，该函数undefined 。 你想叫typing代替：

 var getInput = document.getElementById("input"); getInput.onkeyup = function(e) { if (e.keyCode == 13) { var i = 0; var text = input.value; function typing() { if (i < text.length) { document.getElementById('output').innerHTML += text.charAt(i); i++; setTimeout(typing, 200); } } typing(); e.currentTarget.value = ""; } }

 <div class="background"></div> <div class="input"></div> <div class="typing"> <div class="input-group"> <div class="form-group"> <label for="text">Please Type Here:</label> <input type="text" class="form-control" id="input"> </div> </div> </div> <div class="output" id="output"> </div>

Answer 2

您可以在Javascript中使用keyup事件并收听该事件，并在每次键盘击键时更新DOM元素。

 window.onload = function() { let myInputElement = document.querySelector(`#myInput`); if (myInputElement) { myInputElement.addEventListener('keyup', function(event) { let myTextElement = document.querySelector(`#myText`); myTextElement.innerText = myInputElement.value; }); } }

 <html> <head> </head> <body> <input id="myInput" /> <br> <hr> <p id="myText"></p> </body>

将用户的输入复制为Javascript中的键入效果

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-05-03 16:19:57

解决方案2
0 2018-05-03 16:29:45

将用户的输入复制为Javascript中的键入效果

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-05-03 16:19:57

解决方案2 0 2018-05-03 16:29:45

解决方案1
2 已采纳 2018-05-03 16:19:57

解决方案2
0 2018-05-03 16:29:45