美文网首页
点击复制按钮复制到剪贴板

点击复制按钮复制到剪贴板

作者: 雨未浓 | 来源:发表于2020-07-21 21:06 被阅读0次

    思路:

    1. 点击复制按钮选中要复制的内容
    2. 从何处选中,内容选中状态的实现
    3. 选中内容复制到剪贴板(实现ctrl+c)

    code:

    html

    <div>
          <button id="button">复制</button> // 复制按钮
          <textarea id="text" cols="30" rows="10" readonly>这是一段测试文字</textarea>  //需要复制的内容
    </div>
    

    js

            var button = document.getElementById('button')
            var text = document.getElementById('text')
            button.addEventListener('click', function(){
                text.focus() // 文本框获取焦点事件,以便于获取选中位置
                text.setSelectionRange(0, -1) // 设置选中范围,只有文本框有此事件
                document.execCommand('copy') // 执行复制
            })
    
    效果图

    点击复制按钮,要复制的内容选中并复制到剪贴板

    相关文章

      网友评论

          本文标题:点击复制按钮复制到剪贴板

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