jQuery onclick复制粘贴功能

时间:2018-10-28 03:01:40

标签: javascript

单击锚标签1,我试图将文本从文本框复制到文本框1。它工作正常。如何创建锚标记2,将文本从文本框复制到文本框2。(JSFiddle link

<textarea id="textarea" placeholder="text"></textarea>
<a onclick="fn_copy();">target </a>
<a>target 2 </a>
<textarea id="target_1"></textarea>
<textarea id="target_2"></textarea>

<script>
function fn_copy()
{
    var temp = document.getElementById("textarea").value;
    if(temp != "")
    {
        document.getElementById("target_1").value = temp;
    }
    else
        alert("Text is Empty");
    }
</script>

4 个答案:

答案 0 :(得分:0)

为什么不扩展您的函数,使其接受要复制的元素的参数。

  function fn_copy(from, to) {
    var temp = document.getElementById(from).value;
    if (temp != "") {
      document.getElementById(to).value = temp;
    } else {
      alert("Text is Empty");
    }
    return false;
  }

修改后的标记

<textarea id="textarea" placeholder="text"></textarea>
<a onclick="fn_copy('textarea','target_1');">target </a>
<a onclick="fn_copy('textarea','target_2');">target 2 </a>
<textarea id="target_1"></textarea>
<textarea id="target_2"></textarea>

Fiddle here

答案 1 :(得分:0)

这是一个可行的示例:

<!DOCTYPE html>
<html>
<script type="text/javascript">
function fn_copy(data)
{
    var temp = document.getElementById("textarea").value;
    if(temp != "")
    {
        document.getElementById("target_"+data).value = temp;
    }
    else
        alert("Text is Empty");
    }
</script>
<body>
<textarea id="textarea" placeholder="text"></textarea>
<a onclick="fn_copy(1);">target </a>
<a onclick="fn_copy(2);">target 2</a>
<textarea id="target_1"></textarea>
<textarea id="target_2"></textarea>



</body>
</html>

答案 2 :(得分:0)

您可以将参数id为textarea的值传递给fn_copy函数

function fn_copy(id)
{
    var temp = document.getElementById("textarea").value;
    if(temp != "")
    {
       document.getElementById(id).value = temp;
    }
    else
    alert("Text is Empty");
 }
 <textarea id="textarea" placeholder="text"></textarea>
 
 
<a onclick="fn_copy('target_1');">target 1</a>
<a onclick="fn_copy('target_2');">target 2</a>

<textarea  id="target_1"></textarea>
<textarea  id="target_2"></textarea>

答案 3 :(得分:0)

将它们全部包装在<form>标记中

target属性添加到每个链接,并将每个值分配给#id的{​​{1}}的值。 HTMLFormControlsCollection 提供了用于访问<textarea><form>的简洁语法。 Event Delegation模式用于处理click事件,而<textarea>s上只有一个事件处理程序,而每个<form>上只有一个onclick事件处理程序。通过让父元素处理click事件,所有子元素和任何动态添加的元素都由一个处理程序处理。


演示

<a>
var form = document.forms[0];
var ui = form.elements;
form.onclick = fnCopy;

function fnCopy(e) {
  var tgt = e.target;
  var txt = ui.textarea.value;
  if (tgt.tagName === 'A' && txt.length > 0) {
    var textTo = tgt.target;
    document.querySelector('#' + textTo).value = txt;
  } else if (tgt.tagName === 'A' && txt.length < 1) {
    alert('No text available');
  } else {
    return false;
  }
}