CODEWITHSUNDEEP
javascripthtml
ixcode
ixcode

Reputation: 653

How to display the same text from a textarea into another textarea and vice versa?

How do I make the three textareas in the sample below to show the same text at the same time by auto copying and updating the text from one another?

If I type in or change the text from textarea 1 it should then auto copy/update all the text from textarea 2 and textarea 3 and vice versa? Right now it only seems to copy and update text from the textarea 1.

$(document).ready(function () {
    $('#field_1').on('change', function (e) {
       $('#field_2').val($('#field_1').val());
        $('#field_3').val($('#field_1').val());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea type='text' id='field_1'></textarea>
<textarea type='text' id='field_2'></textarea>
<textarea type='text' id='field_3'></textarea>

Been looking into this for some time and I cannot do it, so I will really appreciate any help, thank you!

Upvotes: 0

Views: 106

Answers (5)

Theodore MCA
Theodore MCA

Reputation: 1178

we can use Proxy to watch the changes and update all the text Areas

    let field1 = document.getElementById("field_1");
    let field2 = document.getElementById("field_2");
    let field3 = document.getElementById("field_3");
    const data = {
        value: ''
    };
    const handler = {
        set(target, key, value) {
            field1.value = field2.value = field3.value = value;
        }
    };
    
    const proxy = new Proxy(data, handler);
    field1.addEventListener("input", (event) => {
        proxy.value = event.target.value;
        console.log(event.target.value);
    });
    field2.addEventListener("input", (event) => {
        proxy.value = event.target.value;
        console.log(event.target.value);
    });
    field3.addEventListener("input", (event) => {
        proxy.value = event.target.value;
        console.log(event.target.value);
    });
<textarea type='text' id='field_1'></textarea>
<textarea type='text' id='field_2'></textarea>
<textarea type='text' id='field_3'></textarea>

Upvotes: 1

seif
seif

Reputation: 295

I think this should work

$(document).ready(function () {
    $(':input').keyup(function (){
        $('#field_1').val($(this).val())
        $('#field_2').val($(this).val())
        $('#field_3').val($(this).val())
    });
});
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea type='text' id='field_1'></textarea>
<textarea type='text' id='field_2'></textarea>
<textarea type='text' id='field_3'></textarea>

Upvotes: 2

edvilme
edvilme

Reputation: 578

Easy, with vanilla js as it is lighter.

// First create array with elements
let allTextAreas = [...document.querySelectorAll('textarea')];

allTextAreas.forEach(textArea=>{
  // For each element, add input listener
  textArea.addEventListener('click', ({target: {value}})=>{
    // On input, update all other elements
    allTextAreas
      .filter(item=>item!=textArea)
      .forEach(item=>{
        item.value = value;
      })
  })
})
<textarea type='text' id='field_1'></textarea>
<textarea type='text' id='field_2'></textarea>
<textarea type='text' id='field_3'></textarea>

Upvotes: 1

Beoski
Beoski

Reputation: 81

Something like this could work, capturing the change event, could also capture it on the body instead of aadding sync_container div.

$(document).ready(function () {
    document.getElementById('sync_container').addEventListener('change', function(event){
        var element = event.target;
        var controls = element.getAttribute('aria-controls');
        if (controls) {
            controls = controls.split(' ');
            controls.forEach(function(id) {
                var next = document.getElementById(id);
                if (next) {
                    next.value = element.value;
                }
            });
        }
    }, true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="sync_container">
    <textarea type='text' id='field_1' aria-controls='field_2 field_3'></textarea>
    <textarea type='text' id='field_2' aria-controls='field_1 field_3'></textarea>
    <textarea type='text' id='field_3' aria-controls='field_1 field_2'></textarea>
</div>

Upvotes: 1

n--
n--

Reputation: 3856

this should do the trick:

$(document).ready(function () {
  const ta = document.querySelectorAll('textarea');
  ta.forEach(t => {
    t.addEventListener('input', e => {
      ta.forEach(t => {
        t !== e.target && (t.value = e.target.value);
      });
    })
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea type='text' id='field_1'></textarea>
<textarea type='text' id='field_2'></textarea>
<textarea type='text' id='field_3'></textarea>

Upvotes: 2

Related Questions