如何在不同的文本区域显示用户的输入？

Question

我正在尝试创建一个类似于https://fonts.google.com/ 的页面，其中用户在搜索栏中写了一些内容，并且文本会自动显示在具有不同字体的不同文本区域中。 enter image description here

我该怎么做？我试过这个：

   <input type="text" id="textInput" name="txt" value="Search Fonts..." oninput="copyText()">

   <script>
    function copyText(){
        var text = document.getElementById("textInput");
        text.select();
        document.execCommand("copy")
        document.getElementById('output1').innerHTML=text.value;
    }
    </script> 

但是，文本没有显示在不同的区域，只显示在一个区域，并且它的复制速度太快（就像用户完全结束写入所有内容后一样）

我该如何改进呢？非常感谢！

Answer 1

试试这个：

<script>
function cloneText(textbox)
{
  document.getElementById('n2').value = textbox.value;
  document.getElementById('n3').value = textbox.value;
}

function copyText()
{
    let sorgent = document.getElementById("s1");
    let destination_1 = document.getElementById("d1");
    let destination_2 = document.getElementById("d2");
    destination_1.value = sorgent.value;
    destination_2.value = sorgent.value;
}


</script>

<h2>Copy In RealTime</h2>

<input type="text" name="n1" id="n1" onkeyup="cloneText(this)">
<input type="text" name="n2" id="n2"/>
<input type="text" name="n3" id="n3"/>

<h2>Copy With Button</h2>

<label>Sorgent</label><input type="text" name="s1" id="s1">
<label>Destination 1</label><input type="text" name="d1" id="d1"/>
<label>Destination 2</label><input type="text" name="d2" id="d2"/>

<input type="button" value="copy" onClick="copyText();" />