Question

单击提交按钮后，我在innerhtml中得到结果。我需要使用复制按钮复制结果。请帮帮我。下面提到的脚本：enter link description here

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .form-row{
        margin-bottom:18px;
      } 
      div {
        background-color: lightblue;
        width: 650px;
        padding: 35px;
      }
    <!--<div> I don't think  that you really want this here -->
    </style>
</head>
    <body>
      <script type="text/javascript">
          function getDisplay(){
            var items=document.getElementsByName('acs');
            var selectedItems="";
            for(var i=0; i<items.length; i++){
                if(items[i].type=='checkbox' && items[i].checked==true)
                   selectedItems+=items[i].value+"\n";
            }
            document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
          }
          function getclear(){
              document.getElementById("display").innerHTML = "";
              var items = document.getElementsByName('acs');
              for (var i = 0; i < items.length; i++) {
                  if (items[i].type == 'checkbox') items[i].checked = false;
              }
          }
      </script> 
    <div id="whole">
      <font size="4">Profile Edited :</font>
    <p>
      <input type="checkbox" name="acs"  value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
      <input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
      <input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
      <input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
    </p>
    <p>
      <button onclick="getDisplay();" style="height:30px; width:100px"  >Submit</button>   
      <button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
      <button onclick="getCopy();" style=" height:30px; width:100px" >Copy</button>
    </p>
    </div>
    <font size="5">Notes:</font>
    <div id="display"></div>  
  </body>
</html>

Answer 1

好吧，我想这就是你想要的...

Javascript：

    function copyToClipboard() {
document.querySelector('#display').select();
document.execCommand('copy');
}

而且我不知道如何从输入中提取任何东西，因此，如果您这样做了，然后对输入进行样式设置而没有边框，那么它看起来就不会像输入...

<button id="copyToClipboard" onclick="copyToClipboard()" style=" height:30px; width:100px" >Copy</button>
<input id = "display" name="exampleClipboard"  style="width:500px; border: none;" type="text">

Answer 2

我尝试了第一个答案，也无法为我工作。所以我尝试了这种方式。注意：我为您提供了一个创建用于测试的对话框的功能。实际功能如下所示。但是我切换到了textarea而不是div，这可能并不是您想要的。

function innerHtmlTest() {
  var html='<textarea rows="2" cols="40" id="display" style="border:none;">This is just a text string.</textarea>';
  html+='<br /><input type="button" value="Copy" onClick="getHtml();" />';
  html+='<br /><textarea rows="2" cols="40" id="dsply" placeholder="Paste Here"></textarea>';
  html+='<script>function getHtml(){ document.getElementById("dsply").select();document.execCommand("copy");}</script>';
  var userInterface=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Copy");
}

function getHtml(){ 
  document.getElementById("display").select();
  document.execCommand("copy");
}

因此，也许您想更改为文本区域而不是div。我在文本框中经常使用此技术，但之前从未尝试过使用div。

Answer 3

这有点棘手，因为它不是TextElement，所以不能select()作为文本。

所以我们在这里要做的是获取div元素的innerText，然后创建一个Textarea元素并附加值，然后我们可以select()并将其复制到剪贴板，这里有工作代码：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .form-row{
        margin-bottom:18px;
      } 
      div {
        background-color: lightblue;
        width: 650px;
        padding: 35px;
      }
    <!--<div> I don't think  that you really want this here -->
    </style>
</head>
    <body>
      <script type="text/javascript">
          function getDisplay(){
            var items=document.getElementsByName('acs');
            var selectedItems="";
            for(var i=0; i<items.length; i++){
                if(items[i].type=='checkbox' && items[i].checked==true)
                   selectedItems+=items[i].value+"\n";
            }
            document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
          }
          function getclear(){
              document.getElementById("display").innerHTML = "";
              var items = document.getElementsByName('acs');
              for (var i = 0; i < items.length; i++) {
                  if (items[i].type == 'checkbox') items[i].checked = false;
              }
          }
          function copyToClipBoard() {
            var str = document.getElementById('display').innerText;
            var el = document.createElement('textarea');
            el.value = str;
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
          };
      </script> 


    <div id="whole">
      <font size="4">Profile Edited :</font>
    <p>
      <input type="checkbox" name="acs"  value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
      <input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
      <input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
      <input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
    </p>
    <p>
      <button onclick="getDisplay();" style="height:30px; width:100px"  >Submit</button>   
      <button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
      <button onclick="copyToClipBoard();" style=" height:30px; width:100px" >Copy</button>
    </p>
    </div>
    <font size="5">Notes:</font>
    <div id="display"></div>  
  </body>
</html>

如何使用复制按钮复制innerHtml结果

3 个答案: