Changing value of textarea with JavaScript

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.

The sleep function is horrible, please delete it, forever! — RobG
– RobG, Commented Jul 23, 2014 at 4:16

SlyBeaver · Accepted Answer · 2014-07-23 04:23:36Z

2

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

edited Jul 23, 2014 at 4:23

answered Jul 23, 2014 at 4:16

SlyBeaver

1,31212 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RobG Over a year ago

The sleep function should be replaced by setTimeout.

SlyBeaver Over a year ago

I think setTimeout not suitable function in this example. But I think it's best )

RobG Over a year ago

It can replace sleep very easily, see the other answers.

dfsq · Accepted Answer · 2014-07-23 04:21:24Z

1

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/

answered Jul 23, 2014 at 4:21

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

RobG · Accepted Answer · 2014-07-23 04:32:06Z

0

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

answered Jul 23, 2014 at 4:32

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

Khalid · Accepted Answer · 2014-07-23 04:31:23Z

0

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

answered Jul 23, 2014 at 4:31

Khalid

4,8285 gold badges29 silver badges50 bronze badges

Collectives™ on Stack Overflow

Changing value of textarea with JavaScript

4 Answers 4

3 Comments

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

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

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

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related