Question

我正在尝试创建一个脚本，允许用户在一个字段中输入文本，然后将该文本输入到textarea中，就好像正在输入一样。

JavaScript的：

<script type="text/javascript">

//function to delay
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

function changeValue() {
var text = document.getElementById("f").value;
var dst = document.getElementById("t").innerHTML;


var index;
for (index = 0; index < text.length; ++index) {
    dst += text.charAt(index);
    sleep(10);
}
}
</script>

HTML

<textarea id="t"></textarea><br>
<input type="text" id="f">
<input type="button" onclick="changeValue();" value="Go">

然而，点击按钮什么都不做......有什么问题？

更新

删除sleep（）函数没有任何改变。

Answer 1

您在TextArea上使用innerHTML。你需要使用.value

//function to delay
function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
            break;
        }
    }
}

function changeValue() {
    var text = document.getElementById("f").value;
    var dst = document.getElementById("t");


    var index;
    for (index = 0; index < text.length; ++index) {
        dst.value += text.charAt(index);
        console.log('a');
        sleep(1000);
    }
}

Answer 2

您应该在textarea上使用value而不是innerHTML：

function changeValue() {
    var text = document.getElementById("f").value;
    var dst = document.getElementById("t"); // <-- reference textarea
    var index;
    for (index = 0; index < text.length; ++index) {
        (function(char) {
            setTimeout(function() {
                dst.value += char; // <-- imitate typing by appending chars
            }, 50 * index);
        })(text.charAt(index));
    }
}

另外考虑使用setTimeout进行延迟功能，目前的方法不是最佳方法。

演示：http://jsfiddle.net/SXV38/

Answer 3

无需定义函数sleep，您需要做的就是使用setTimeout递归调用changeValue函数，就像这样

function changeValue(index) 
{
    if(typeof index=="undefined")
        index = 0;
    var text = document.getElementById("f").value;
    var dst = document.getElementById("t").innerHTML;
    setTimeout( function()
    {
        if(index<text.length)
        {
            document.getElementById("t").innerHTML += text[index];
            changeValue(index+1);
        }

    },200);
}

您可以在 jsFiddle

上看到示例

Answer 4

sleep 功能可以锁定浏览器“睡眠”＃34;如果要模拟键入，请使用 setTimeout 在操作之间创建暂停，以允许浏览器继续执行其他工作：

<script>
function typeIt(msg, el) {
  var i = arguments[2] || 0;
  el.value = msg.substr(0, ++i);

  if (i < msg.length) {
    setTimeout(function(){typeIt(msg, el, i)}, 1000);
  }
}
</script>

<form>
  <input id="i0"><br>
  <input id="i1"><br>
  <input type="button"  value="Type it" onclick="
    typeIt(this.form.i0.value, this.form.i1)
  ">
</form>

还有很多其他方法使用闭包和 setInterval ，但是上面的内容很简单并完成了工作（我认为）。

使用JavaScript更改textarea的值

4 个答案:

演示：http://jsfiddle.net/SXV38/