我想将 input 和 textarea 的值复制到剪贴板

Posted 2023-02-24

【中文标题】我想将 input 和 textarea 的值复制到剪贴板

【英文标题】：I want to copy the value of input and textarea to clipboard

【发布时间】：2019-10-19 11:56:07

【问题描述】：

我有一个问题^^;

我想使用 js 或 jquery 按 copy1 将输入复制到剪贴板

我想通过按 copy2 将 textarea 复制到剪贴板

谢谢你告诉我怎么做。

===============================================

我为此搜索了一些代码，但感觉很难。

我应用了这个代码

$("#copy_code").click(function(e) 

  e.preventDefault();

  document.execCommand('copy', false, document.getElementById('select-this').select());

  alert("copy is completed")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="" value="p.content1" size="40">
<button class="btn btn-outline-primary btn-sm myinput" id="copy_code select-this">copy1</button>

例如） https://codepen.io/fabean/pen/GprQJa

但是错误

Uncaught TypeError: Cannot read property 'select' of null
    at htmlButtonElement.<anonymous> ((index):251)
    at HTMLButtonElement.dispatch (custom.js:3)
    at HTMLButtonElement.q.handle (custom.js:3)

【参考方案1】：

id="copy_code select-this" 不正确。根据您的 JS 猜测，您实际上希望 input 拥有 id="select-this" 和 button 拥有 id="copy_code"。

$("#copy_code").click(function(e) 

  e.preventDefault();

  document.execCommand('copy', false, document.getElementById('select-this').select());

  alert("copy is completed")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="select-this" type="text" name="" value="p.content1" size="40">
<button class="btn btn-outline-primary btn-sm myinput" id="copy_code">copy1</button>

【讨论】：

我在设置id时出错了谢谢你告诉我。