需求：用戶點擊指定的地方就可以復(fù)制內(nèi)容到剪切板

前置知識

document.execCommand()方法
先看看這個方法在 MDN 上是怎么定義的：
which allows one to run commands to manipulate the contents of the editable region.
意思就是可以允許運行命令來操作可編輯區(qū)域的內(nèi)容劣像，注意疗垛，是可編輯區(qū)域。

方法返回一個 Boolean 值敏储，表示操作是否成功。
這個方法在之前的兼容性其實是不太好的，但是好在現(xiàn)在已經(jīng)基本兼容所有主流瀏覽器了糙捺，在移動端也可以使用。

使用方法

需求：從輸入框復(fù)制內(nèi)容
現(xiàn)在頁面上有一個 <input> 標(biāo)簽笙隙，我們想要復(fù)制其中的內(nèi)容洪灯，我們可以這樣做：

<input id="demoInput" value="hello world">
<buttonid="btn">點我復(fù)制</button>

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
    const input = document.querySelector('#demoInput')
    // 選擇要復(fù)制的表單元素的內(nèi)容
    input.select()
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('復(fù)制成功')
        // 讓表單元素失去焦點
        input.blur()
    }
})

需求：復(fù)制非input的文本內(nèi)容
有的時候頁面上并沒有 <input> 標(biāo)簽，我們可能需要從一個 <div> 中復(fù)制內(nèi)容竟痰，或者直接復(fù)制變量签钩。
還記得在 execCommand() 方法的定義中提到，它只能操作可編輯區(qū)域坏快，也就是意味著除了 <input>铅檩、 <textarea> 這樣的輸入域以外，是無法使用這個方法的莽鸿。
這時候我們只能采取“曲線救國”的方法昧旨。

<button id="btn">點我復(fù)制</button>
<div id="div">我是div盒子里面的內(nèi)容，出現(xiàn)我代表復(fù)制成功了</div>

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
    const input = document.createElement('input')
    const div = document.querySelector('#div')
    document.body.appendChild(input)
    input.setAttribute(
        'value',
        div.innerText
    )
    input.select()
    if (document.execCommand('copy')) {
        document.execCommand('copy')
        console.log('復(fù)制成功')
    }
    document.body.removeChild(input)
})

算是曲線救國成功了吧祥得。在使用這個方法時兔沃，遇到了幾個坑。
在Chrome下調(diào)試的時候啃沪，這個方法時完美運行的。然后到了移動端調(diào)試的時候窄锅，坑就出來了创千，集中體現(xiàn)了ios的調(diào)試上

• 1.點擊復(fù)制時屏幕下方會出現(xiàn)白屏抖動缰雇，仔細(xì)看是拉起鍵盤又瞬間收起
  知道了抖動是由于什么產(chǎn)生的就比較好解決了。既然是拉起鍵盤追驴，那就是聚焦到了輸入域械哟，那只要讓輸入域不可輸入就好了，在代碼中添加 input.setAttribute('readonly','readonly');使這個 <input>是只讀的殿雪，就不會拉起鍵盤了暇咆。
• 2.無法復(fù)制
  這個問題是由于 input.select() 在ios下并沒有選中全部內(nèi)容，我們需要使用另一個兼容IOS的方法來選中內(nèi)容丙曙，這個方法就是 input.setSelectionRange(0,input.value.length);爸业。

完整代碼如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
    const input = document.createElement(
        'input'
    )
    const div = document.querySelector('#div')
    input.setAttribute('readonly', 'readonly')
    input.setAttribute(
        'value',
        div.innerText
    )
    document.body.appendChild(input)
    input.setSelectionRange(0, 9999)
    if (document.execCommand('copy')) {
        document.execCommand('copy')
        console.log('復(fù)制成功')
    }
    document.body.removeChild(input)
})