Question

我的网页目前在text#文本框中输入ta#（自动代码如下）。

问题＃1）当我运行该函数时，我只能弄清楚如何让它同时输入所有文本框。 - 我希望它在每个文本框中自然地键入（逐个1，每个之间稍有延迟）。我怎么能做到这一点？

问题＃2）一旦用户点击/选择文本框，关闭/清除此自动打字的正确方法是什么？

var text1 = "Type this into textbox usr";
var text2 = "Type this into textbox usr2";

var ta1 = document.getElementById("usr");
var ta2 = document.getElementById("usr2");

function type(string,element){
 (function writer(i){
  if(string.length <= i++){
    element.value = string;
    return;
  }
  element.value = string.substring(0,i);
  if( element.value[element.value.length-1] != " " )element.focus();
  var rand = Math.floor(Math.random() * (100)) + 140;
  setTimeout(function(){writer(i);},rand);
 })(0)
}

type(text1,ta1);
type(text2,ta2); // This doesnt work right.

Answer 1

setTimeout使这本身异步，因此Promise对象是你的朋友。请注意，以下代码适用于所有现代浏览器。这不包括Internet Explorer :)。

这里我们让type返回一个Promise，它将在输入完成后解析。我已经稍微修改了您的代码，以便在输入完成时writer返回false，如果有，则代码将解析Promise，并停止运行超时。有几种方法可以做到这一点，但这是我有时间...

我还添加了快速而肮脏的代码，当您单击文本框时会停止输入。但请注意，它会停止两个文本框的所有输入。您可以使用代码来使其继续前往第二个文本框，如果这是您想要的。

＆＃13;

var text1 = "Type this into textbox usr";
var text2 = "Type this into textbox usr2";

var ta1 = document.getElementById("usr");
var ta2 = document.getElementById("usr2");

function type(string, element) {
  var timeout;
  element.addEventListener('click', function() {
    if (timeout) {
      clearTimeout(timeout);
    }
  });
  var completePromise = new Promise(function(resolve, reject) {

    (function writer(i) {
      if (string.length <= i++) {
        element.value = string;
        return false;
      }
      element.value = string.substring(0, i);
      if (element.value[element.value.length - 1] != " ") {
        element.focus();
      }
      var rand = Math.floor(Math.random() * (100)) + 140;
      timeout = setTimeout(function() {
        if (!writer(i)) {
          resolve();
          clearTimeout(timeout);
        }
      }, rand);
      return true;
    })(0);
  });
  return completePromise;
}

type(text1, ta1).then(function() {
  type(text2, ta2);
});

＆＃13;

<input id="usr" type="text" />
<input id="usr2" type="text" />

＆＃13;

Javascript - 按顺序运行函数（不是同时运行）

1 个答案: