0

I have created table cell with copy text.. when I click copy it gets the value of particular ipno cell and post it to the input.. then I copy it into clipboard using execCommand.. It is working fine when I make input type as text.. but the problem is that it doesn't copy the value after I make input as hidden.. because I doesn't need to show input.. my table tr is as follow

 <td align="center" ><span class = 'cpy'><?echo $row['ipno'];?></span> <span class="text-primary copytd"> Copy</span> </td>

and my input to copy ipno from table is

 <input type="hidden" name = "ip" id="divcopy" />

and my jQuery and Javascript function to copy on clipboard is

 $('.copytd').on("click",function(e) {
  var copyText = $(this).closest('tr').find(".cpy").text();
   // $("#divcopy").val(copyText);
    $('input[name="ip"]').val(copyText);
    var di = $("#divcopy").val();
    myFunction();
  // $(this).closest('tr').find(".copytd").text('Copied');
 });
 function myFunction() {
var copyT = document.getElementById("divcopy");
copyT.select();
copyT.setSelectionRange(0, 99999); /*For mobile devices*/
document.execCommand("copy");
alert("copied");
}

note: it is working fine when I make input as visible.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Jeya kumar G
  • 85
  • 1
  • 7

1 Answers1

0

You can't copy to clipboard with type='hidden'

use 'text'

This is part of my code. Refer to it

Make and use a 'blind' class to hide it.

.blind{visibility:hidden;overflow:hidden;position:absolute;
top:0;left:0;width:0;height:0;font-size:0;line-height:0}

If you are using it in web, you may not need readonly, and contenteditable property.

Those are for mobile to prevent keypad pop up

HTML

<input type="text" class="blind" id="myLink" value="" 
readonly="readonly" contenteditable="true">

JS

function copyLink(link, title) {
    $('#myLink').val(link);
    var linkUrl = document.getElementById("myLink");
    linkUrl.select();
    linkUrl.setSelectionRange(0, 9999);
    document.execCommand("Copy");
}

For your Code

HTML

 <input type="text" name = "ip" id="divcopy"  class="blind" value="" readonly="readonly" contenteditable="true">

JS

$('.copytd').on("click",function(e) {
  var copyText = $(this).closest('tr').find(".cpy").text();
   // $("#divcopy").val(copyText);
    $('input[name="ip"]').val(copyText);
    var di = $("#divcopy").val();
    myFunction();
  // $(this).closest('tr').find(".copytd").text('Copied');
 });
 function myFunction() {
var copyT = document.getElementById("divcopy");
copyT.select();
copyT.setSelectionRange(0, 99999); /*For mobile devices*/
document.execCommand("copy");
alert("copied");
}
chuu
  • 128
  • 6