JS的复制功能

作者: 付出的前端路 | 来源:发表于2018-04-16 15:48 被阅读0次

使用原生document.execCommand()方法

方法1 在input 输入框中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <input id="demoInput" value="hello world">
    <button id="btn">点我复制</button>
  </body>
  <script>
    const btn = document.querySelector('#btn');
    btn.addEventListener('click', () => {
      const input = document.querySelector('#demoInput');
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
      }
    })
  </script>
</html>

方法2 在div或者变量中的复制

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button id="btn">点我复制</button>
  </body>
  <script>
    const btn = document.querySelector('#btn');
      btn.addEventListener('click',() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.setAttribute('value', '听说你想复制我');
        input.select();
        if (document.execCommand('copy')) {
          document.execCommand('copy');
          console.log('复制成功');
        }
        document.body.removeChild(input);
    })
  </script>
</html>

参考链接:

相关文章

  • js 复制功能

    html input写上readonly主要为了移动端选中复制时键盘不弹起 js input.setSelecti...

  • js - 复制功能

    通过创建input实现复制功能html部分 js 部分

  • JS的复制功能

    使用原生document.execCommand()方法 方法1 在input 输入框中 方法2 在div或者变...

  • js 实现复制功能

  • JS实现复制功能

    之前是在一些类似于www.bootcss.com类似的网站见到过复制按钮,点击之后一整行文字都可以复制,然后到指定...

  • vue 复制功能 js

    理想本为粉碎你而来,你却当它是暗夜里唯一的光 下载此插件 前端QQ群: 981668406在此附上我的QQ: 24...

  • js复制功能笔记

    document.addEventListener('copy',save);//监听浏览器copy事件 docu...

  • js实现复制功能

    html js

  • Js复制文本功能

    参考:1.https://www.cnblogs.com/tylerdonet/p/4533782.html2.h...

  • js进行复制功能

    代码实现思路 创建一个 textarea 标签然后通过 js原生 document.execCommand('co...

网友评论

    本文标题:JS的复制功能

    本文链接:https://www.haomeiwen.com/subject/dahlhftx.html