2016-04-05 11 views
1

Ich versuche, Daten in der Zwischenablage onclick -Ereignis zu kopieren, aber ich kann es nicht für mehrere Eingabe-IDs tun. Hier ist mein Code und Referenz Stackoverflow url: Using execCommand (Javascript) to copy hidden text to clipboardSo kopieren Sie in die Zwischenablage mit mehreren Schaltfläche IDs mit jquery

und mein Code für Anfrage:

<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="copy-me" value="mohit text" type="text" class="copy"> 
<button id="copy-btn" onclick="idname(this.id, 'copy-me')">Copy</button><br><br> 
<input id="copy-me1" value="mohit text2" type="text" class="copy"> 
<button id="copy-btn1" onclick="idname(this.id, 'copy-me')">Copy</button><br><br> 
<input id="copy-me2" value="mohit text3" type="text" class="copy"> 
<button id="copy-btn2" onclick="idname(this.id, 'copy-me')">Copy</button><br><br> 
<textarea placeholder="paste here"></textarea> 
<script type="text/javascript"> 
    function idname(a, b) 
    { 
     alert(a); 
     var copyBtn = $(a), 
       input = $(b); 
     copyBtn.on('click', copyToClipboard); 
     function copyToClipboardFF(text) { 
      window.prompt("Copy to clipboard: Ctrl C, Enter", text); 
     } 
     function copyToClipboard() { 
      var success = true, 
        range = document.createRange(), 
        selection; 
      // For IE. 
      if (window.clipboardData) { 
       window.clipboardData.setData("Text", input.val()); 
      } else { 
       // Create a temporary element off screen. 
       var tmpElem = $('<div>'); 
       tmpElem.css({ 
        position: "absolute", 
        left: "-1000px", 
        top: "-1000px", 
       }); 
       // Add the input value to the temp element. 
       tmpElem.text(input.val()); 
       $("body").append(tmpElem); 
       // Select temp element. 
       range.selectNodeContents(tmpElem.get(0)); 
       selection = window.getSelection(); 
       selection.removeAllRanges(); 
       selection.addRange(range); 
       // Lets copy. 
       try { 
        success = document.execCommand("copy", false, null); 
       } 
       catch (e) { 
        copyToClipboardFF(input.val()); 
       } 
       if (success) { 
        alert("The text is on the clipboard, try to paste it!"); 
        // remove temp element. 
        tmpElem.remove(); 
       } 
      } 
     } 
    } 

</script> 

Antwort

1

Versuchen Sie es auf diese Weise (es gibt keine Notwendigkeit für zusätzliche Wrapper-Funktion idName):

<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="copy-me" value="mohit text" type="text" class="copy"> 
<button id="copy-btn" onclick="copyToClipboard('#copy-me')">Copy</button><br><br> 
<input id="copy-me1" value="mohit text2" type="text" class="copy"> 
<button id="copy-btn1" onclick="copyToClipboard('#copy-me1')">Copy</button><br><br> 
<input id="copy-me2" value="mohit text3" type="text" class="copy"> 
<button id="copy-btn2" onclick="copyToClipboard('#copy-me2')">Copy</button><br><br> 
<textarea placeholder="paste here"></textarea> 
<script type="text/javascript"> 

     function copyToClipboardFF(text) { 
      window.prompt("Copy to clipboard: Ctrl C, Enter", text); 
     } 

     function copyToClipboard(inputId) { 
     var input = $(inputId); 
      var success = true, 
        range = document.createRange(), 
        selection; 
      // For IE. 
      if (window.clipboardData) { 
       window.clipboardData.setData("Text", input.val()); 
      } else { 
       // Create a temporary element off screen. 
       var tmpElem = $('<div>'); 
       tmpElem.css({ 
        position: "absolute", 
        left: "-1000px", 
        top: "-1000px", 
       }); 
       // Add the input value to the temp element. 
       tmpElem.text(input.val()); 
       $("body").append(tmpElem); 
       // Select temp element. 
       range.selectNodeContents(tmpElem.get(0)); 
       selection = window.getSelection(); 
       selection.removeAllRanges(); 
       selection.addRange(range); 
       // Lets copy. 
       try { 
        success = document.execCommand("copy", false, null); 
       } 
       catch (e) { 
        copyToClipboardFF(input.val()); 
       } 
       if (success) { 
        alert("The text is on the clipboard, try to paste it!"); 
        // remove temp element. 
        tmpElem.remove(); 
       } 
      } 
     } 

</script>