文字複製

• 僅能複製input內的文字
• 有幾種api(相容問題)

這裡使用典型的一種api，另，為了能複製div內的文字，就需要我們通過動態建立input來實現。

dom.addEventListener('click',e=>{
    // 建立input
    let input = document.createElement('input');
    document.body.appendChild(input);
    // 塞入內容
    input.setAttribute('value', res.innerText);
    // 選中內容
    input.select();
    // 執行復制
    document.execCommand('copy');
    // 移除掉 input
    document.body.removeChild(input);
})
 

文字選擇

• document.body.createTextRange
• window.getSelection

// 選擇某dom內的所有文字
function selectText(el) {
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(el);
        selection.removeAllRanges();
        selection.addRange(range);
    } 
}
 

簡單結合

dom.addEventListener('click',e=>{
    // 建立input
    let input = document.createElement('input');
    document.body.appendChild(input);
    // 塞入內容
    input.setAttribute('value', res.innerText);
    // 選中內容
    input.select();
    // 執行復制
    document.execCommand('copy');
    // 介面上選擇文字  需放在 iput.select()之後，否則會被取消效果
    this.selectText(e.target)  
    // 移除掉 input
    document.body.removeChild(input);
})