用 JavaScript 改变 textarea 的值

Posted 2023-05-07

【中文标题】用 JavaScript 改变 textarea 的值

【英文标题】：Changing value of textarea with JavaScript

【发布时间】：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功能太可怕了，请永远删除它！

【参考方案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

上查看示例