时间戳

首页 > 解决方案 > 如何在不同的文本区域显示用户的输入？

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

问题描述

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

我怎样才能做到这一点？我试过这个：

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

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

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

标签： javascripthtmlcopy

解决方案

尝试这个：

<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();" />

推荐阅读