Copy value from Textarea to Other Automatically

Question

I saw this post (How to take the value of one input and assign to another? ) but I couldn’t adapt to the textarea.

I have the following HTML, which I want to pass the value of the first textarea to the second:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container" style="margin-top:100px">

             <div class="row">
            <div class="col-md-6">
              <div class="form-group">
    <label for="textoOriginal">Insira seu Texto</label>
    <textarea class="form-control" id="texto" class="texto" rows="3"></textarea>
  </div>
            </div>
            <div class="col-md-6">
              <label for="textoConvertido">Insira seu Texto</label>
    <textarea class="form-control" id="convertido1" name="convertido1" rows="3"></textarea>
            </div>
      	</div>

    </div>

Answer 1

Using jQuery, just do so:

$(function () {

    $('#texto').on('input', function () {
         $('#convertido1').val(this.value);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="margin-top:100px">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="textoOriginal">Insira seu Texto</label>
                <textarea class="form-control" id="texto" class="texto" rows="3"></textarea>
            </div>
        </div>
        <div class="col-md-6">
            <label for="textoConvertido">Insira seu Texto</label>
            <textarea class="form-control" id="convertido1" name="convertido1" rows="3"></textarea>
        </div>
    </div>

</div>

Answer 2

You can do so using jquery

$('#one').on('keyup', function(){
  var valor = $(this).val()
  $('#two').val(valor)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="one"></textarea>
<textarea id="two"></textarea>

Or you can also do it using only javascript

let one = document.getElementById('one')
let two = document.getElementById('two')

one.onkeyup = function(){
  let valor = one.value
  two.value = valor
}

<textarea id="one"></textarea>
<textarea id="two"></textarea>

And of course, there are many ways to do that, with click etc. Use as needed.