點擊複製按鈕複製到剪貼板

思路:

  1. 點擊複製按鈕選中要複製的內容
  2. 從何處選中,內容選中狀態的實現
  3. 選中內容複製到剪貼板(實現ctrl+c)

code:

htmlhtml

<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') // 執行復制
        })

效果圖
點擊複製按鈕,要複製的內容選中並複製到剪貼板spa

相關文章
相關標籤/搜索