使用JavaScript更改textarea的值

Question

I'm trying to make a script that allows a user to enter text into a field, and then seeing that text entered into a textarea as if one was typing.

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

However, clicking the button does nothing... What's the problem?

Update

Removing the sleep() function has made no change.

Answer 1

You use innerHTML on TextArea. You need to use .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

Instead of innerHTML you should use value on textarea:

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));
    }
}

Also consider using setTimeout for delay functionality, you current approach is not the way to go.

Demo: http://jsfiddle.net/SXV38/

Answer 3

no need to define the function sleep, all you need to do is to call the changeValue function recursively with setTimeout just like this

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);
} 

you can see the example on jsFiddle

Answer 4

The sleep function locks the browser for the period it's "sleeping". If you want to simulate typing, use setTimeout to create a pause between actions that allows the browser to get on with other work:

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

There are a number of other approaches using closures and setInterval , however the above is simple and does the job (I think).