复制到带有标签和内容的剪贴板

时间：2018-02-25 03:25:06

标签： javascript html

如何复制到剪贴板代码但不仅仅是复制我需要包含标签吗？

例如：

SESA461290

Name Shin Abbas 

Callback +639087614***

我是新手，这是我第一次这样做

＆＃13;
＆＃13; 
<head>
  <title>Shin's Call Template</title>
</head>

<body>
  <div class="form-style-2">
    <form action="" method="get">
      <div class="form-style-2-heading">Shin's Template

        <label for="INtemp"><select name="INtemp" id="INtemp" class="temp-options">
        <option value="" style="display:none">Menu</option>
        <option value="1">ADP password reset</option>
        <option value="20">Autotime password reset</option>
        <option value="2">AMAPS password reset</option>
        <option value="3">Lotus Notes Password reset</option>
        <option value="4">Q2C/EQM password reset</option>
        <option value="5">SAP password reset</option>
        <option value="17">Windows password reset</option>
        <option value="6" class="INql" disabled>---Common Issues----</option>
        <option value="7">Box device security issue</option>
        <option value="19">Inquiry Call</option>
        <option value="8">Laptop Issue</option>
        <option value="9">Network drive issue</option>
        <option value="16">Outlook conenctivity issue</option>
        <option value="18">Misrouted</option>
        <option value="10">PING ID unpairing device</option>
        <option value="11">Pulse secure (unable to login)</option>
        <option value="12">Pulse secure installation</option>
        <option value="13">Unable to login on Windows</option>
        <option value="14">Windows locked out</option>
        <option value="15">Windows trust relatinship issue</option>
          </select></label>
      </div>

      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <label><input class="INNewExec" onclick="openNew();" type="button" value="New" /></label>
      <!-- New Button -->
      <label><span>&nbsp</span><input type="button" value="Reset" onclick="resetPage();" /></label>
      <!-- Reset Button -->
      <label><span>&nbsp</span><input type="submit" onclick="return false;" class="INSubmitExec" value="Submit" /></label>
      <!-- Submit Button -->

      <br>
      <br>
      <!-- below codes are for the LOB radio buttons Dist(distributor) SE (SE employee) Ext (External)-->
      <label><span>Clients</span>
		<input type="radio" name="INlob" id="checkboxDist" value="Dist-client" class="input-radio" /> 
    <label for="checkboxDist" class="checkbox-label-Dist">Distributor</label>
      <b>&nbsp&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp&nbsp</b>
      <input type="radio" name="INlob" id="checkboxSE" value="SE-LOB" class="input-radio" />
      <label for="checkboxSE" class="checkbox-label-SE">SE</label>
      <b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp&nbsp</b>
      <input type="radio" name="INlob" id="checkboxExt" value="Ext" class="input-radio" />
      <label for="checkboxExt" class="checkbox-label-Ext">External</label>

      <!-- below codes are for the Severity radio buttons -->
      <br>
      <br>
      <label><span>Severity</span>
		<input onClick="showMIM(1)" type="radio" name="INsev" id="radioCrit" value="Critical P1" class="input-radio" /> <label for="radioCrit" class="radio-label-Crit">Critical- P1</label>
      <input onClick="showMIM(0)" type="radio" name="INsev" id="radioHigh" value="High P2" class="input-radio" /> <label for="radioHigh" class="radio-label-High">High-P2</label>
      <input onClick="showMIM(0)" type="radio" name="INsev" id="radiomed" value="Medium P3" class="input-radio" /> <label for="radioMed" id="radio-label-Med3" class="radio-label-Med">Medium-P3</label></label>

      <br><br><br><br><br>
      <label for="INname"><span>SESA</span><input type="text" class="input-field" name="INname" value="" id="INname"size="40" /></label><label><input type="checkbox" name="INvip" id="INvip" value="VIP" class="input-checkbox"><b>VIP</b></label>
      <!-- VIP checkbox -->
      <br>
      <label for="INempid"><span>NAME</span><input type="text" class="input-field" name="INempid" id="INempNam" value="" size="40" /></label>
      <br>
      <label for="INloc"><span>CALLBACK</span><input type="text" class="input-field" name="INloc" value="" id="INCall" size="40" /></label>
      <br>
      <label for="INclient"><span>EMAIL</span><input type="text" class="input-field" name="INclient" id="IN" value="" size="40" /></label>
      <br>
      <label for="INphone"><span>Phone Number</span><input type="text" class="input-field" name="INphone" id="INphone" value="" size="40" /></label>
      <br>
      <label for="INemail"><span>RELATED#</span><input type="text" class="input-field" name="INemail" value="" id="INemail" size="40" /></label>
      <br>
      <label for="INbrief"><span>LOCATION</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>

      <br>
      <br>
      <label for="INbrief"><span>Application name:</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
      <br>
      <label for="INbrief"><span>No.of Affected Users</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
      <br>
      <br>
      <label for="INempid"><span style="width:100px; text-align:LEFT;">What is the problem?</span><input type="text" class="input-field" name="INempid" id="INempid" value="" size="40" /></label>
      <br>
      <label for="INloc"><span style="width:100px; text-align:LEFT;">When did the issue begin?</span><input type="text" class="input-field" name="INloc" value="" id="INloc" size="40" /></label>
      <br>
      <label for="INclient"><span style="width:140" /></label>
      <br>
      <label for="INphone"><span style="width:100px; text-align:LEFT;">Error message</span><input type="text" class="input-field" name="INphone" id="INphone" value="" size="40" /></label>
      <br>
      <label for="INemail"><span style="width:100px; text-align:LEFT;">Last time it worked properly</span><input type="text" class="input-field" name="INemail" value="" id="INemail" size="40" /></label>
      <br>
      <label for="INbrief"><span style="width:100px; text-align:LEFT;">any changes to your PC since the last time it worked properly</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
      <br>
      <label for="INbrief"><span style="width:100px; text-align:LEFT;">Have you changed your password recently:</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

请参阅这个类似的问题：  "How do I copy to the clipboard in JavaScript?"。 此页面有许多答案，说明如何使用JavaScript和文本区域将文本复制到剪贴板。

解决问题的最佳方法：

方法1：此方法使用连接到Event Listener（）的HTML文本区域和按钮。 这很可能是您的最佳选择。

来源 - 来自： Dean Taylor 原文： here 

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

方法2：此方法使用与HTML文本区域和按钮相关联的函数。

来源 - 来自： Bart Burg 原文： here 

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<input type="text" name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
        window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

PS： 如果我的笔记冒犯或激怒了你，我很抱歉。在第二次看了之后，我意识到有人可能会采取错误的方式。我希望你理解。

相关问题
最新问题