Question

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

我能够捕获输入并用UITextFieldDelegate显示它，但是当我添加打字效果函数时，它似乎不起作用。

我的代码如下。出了什么问题？

class ViewController: UIViewController, UITextFieldDelegate {...}

console.log()

Answer 1

您已定义typing功能，但尚未调用它。

另外，在setTimeout中，您调用的typeWriter函数为undefined。您想要调用typing：

＆＃13;

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 = "";
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: