用 JavaScript 改变 textarea 的值答案

【问题标题】：Changing value of textarea with JavaScript用 JavaScript 改变 textarea 的值
【发布时间】：2014-09-14 02:54:37
【问题描述】：

我正在尝试制作一个脚本，允许用户在字段中输入文本，然后看到该文本输入到 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() 函数没有任何改变。

【问题讨论】：

sleep功能太可怕了，请永远删除它！

标签： javascript html textarea

【解决方案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);
    }
}

【讨论】：

sleep 函数应替换为 setTimeout。
我认为 setTimeout 在这个例子中不合适的功能。但我认为这是最好的）
它可以很容易地替换sleep，看其他答案。

【解决方案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/

【讨论】：

【解决方案3】：

sleep 功能在浏览器“休眠”期间锁定浏览器。如果您想模拟打字，请使用 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，但是上面的方法很简单并且可以完成工作（我认为）。

【讨论】：

【解决方案4】：

无需定义函数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

上查看示例

【讨论】：