码迷,mamicode.com
首页 > Web开发 > 详细

复制-原生js

时间:2021-06-04 19:39:33      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:选中   代码   func   wrap   put   中文   rap   inpu   修改   

复制-原生js

一、原理分析

  • 浏览器提供了 copy 命令 ,可以复制选中的内容
document.execCommand("copy")
  • 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板

  • select() 方法只对 <input><textarea> 有效

  • 如果是复制其他标签的内容,可以在页面中添加一个 <textarea>,然后把它隐藏掉

二、代码实现

  • HTML 部分
<div class="wrapper">
    <p id="text">这个个要复制的内容</p>
    <textarea id="input">select()只对input textarea有效</textarea>
    <button onclick="copyText()">copy</button>
</div>
  • JS 部分
function copyText() {
    var text = document.getElementById("text").innerText;
    var input = document.getElementById("input");
    input.value = text; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
    alert("复制成功");
}

复制-原生js

标签:选中   代码   func   wrap   put   中文   rap   inpu   修改   

原文地址:https://www.cnblogs.com/jiajia-hjj/p/14849589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!