JS 實現復制、全選文本

 

先上效果，由於截圖，高亮藍色成了灰色　　　　參考這位大佬的   https://www.cnblogs.com/dreambin/p/9046999.html

HTML 部分

<form name=test>　　
    <input type="button" id="cardList" value="點此全選復制" onclick="javascript:selectAll('test.select1')">

    <textarea name="select1" rows=3 cols=46 onclick="selectAll('test.select1')">可以全選</textarea>
</form>

 

javaScript 部分

//實現全選功能
    function selectAll(theField) {

        var tempval = eval("document." + theField)  //這里主要是要得到dom  document.test.select1

        tempval.select()    // 選取文本域的內容

        this.copy(tempval.value)
    }


    //實現復制功能
    /*
        Evevt.clipboardData 對象

        clipboardData是JavaScript剪切板對象，該對象提供了3個常用方法：

    　　clearData():  clipboardData對象從剪切板刪除一種或多種數據格式（一個參數：數據類型）

    　　getData():  clipboardData對象從剪切板獲取指定格式的數據（一個參數：數據類型）

    　　setData():  clipboardData對象賦予指定格式的數據（兩個參數：數據類型，要賦予的值）

    　　*數據類型一般為“"text/plain" ”
    */
    function copy(str) {
        var save = function (e) {
            e.clipboardData.setData('text/plain', str); //clipboardData對象
            e.preventDefault(); //阻止默認行為
        }
        document.addEventListener('copy', save);    
        document.execCommand("copy"); //使文檔處於可編輯狀態，否則無效
    }

    document.getElementById('cardList').addEventListener('click', function (ev) {
        copy(ev.target.innerText)
    })

    selectAll('test.select1')