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

Question

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!

Answer 1

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>

Answer 2

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>

---

Answer 3

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>

Answer 4

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>

Answer 5

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>