js & click copy to clipboard

js & click copy to clipboard

https://www.cnblogs.com/xgqfrms/p/9999061.html
https://www.cnblogs.com/xgqfrms/p/10189199.html
https://www.cnblogs.com/xgqfrms/p/10109703.html

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

vanilla js

1. window.copy only for Chrome Console

2. document.execCommand("copy") & copyText.select()

clickGetNewsId() {
        let that = this;
        let newsID = document.querySelector(`[data-uid="newsId"]`);
        if (newsID) {
            let result = that.commonHandle.newsId || ``;
            let input = newsID.lastElementChild;
            input.addEventListener(`click`, (e) => {
                // console.log(`e.target =`, e.target);
                // console.log(`e.target.dataset =`, e.target.dataset);
                // console.log(`e.target.value =`, e.target.value);
                // that.clickCopyText(input);
                // this.clickCopyText();
                try {
                    if (result) {
                        input.select();
                        document.execCommand("copy");
                        that.$hMessage.success(`資訊 ID, 複製成功!`);
                    } else {
                        that.$hMessage.info(`資訊 ID 爲空, 沒法複製!`);
                    }
                } catch (err) {
                    console.log(`click copy error =`, err);
                    that.$hMessage.error(`你的瀏覽器太古老了，暫時不支持點擊複製的功能!`);
                }
            });
        } else {
            //
        }
        // if (newsID) {
        //     result = newsID.lastElementChild.value;
        //     // result = that.commonHandle.newsId;
        // }
    },
    clickCopyText(input) {
        let that = this;
        let result = that.commonHandle.newsId || ``;
        // console.log(`click copy!`, result);
        // console.log(`window.copy`, window.copy);
        // undefined
        try {
            if (input) {
                input.select();
                if (result) {
                    document.execCommand("copy");
                    that.$hMessage.sucess(`資訊 ID, 複製成功!`);
                } else {
                    that.$hMessage.info(`資訊 ID 爲空, 沒法複製!`);
                }
            }
        } catch (err) {
            console.log(`click copy error =`, err);
            that.$hMessage.error(`你的瀏覽器太古老了，暫時不支持點擊複製的功能!`);
        }
        // try {
        //     if (window.copy) {
        //         if (result) {
        //             console.log(`window.copy!`);
        //             window.copy(result);
        //             that.$hMessage.sucess(`資訊 ID, 複製成功!`);
        //         } else {
        //             that.$hMessage.info(`資訊 ID 爲空, 沒法複製!`);
        //         }
        //     }
        // } catch (err) {
        //     console.log(`click copy error =`, err);
        //     that.$hMessage.error(`你的瀏覽器太古老了，暫時不支持點擊複製的功能!`);
        // }
        return result;
    },

vue

1. input must be :disabled="false"

<h-row class-name="common-handle-padding">
        <h-col span="24">
            <span class="audit-common-lable">資訊 ID</span>
            <h-input
                aria-placeholder="資訊 ID"
                placeholder="請輸入資訊 ID"
                style="width: 80%"
                ref="newsId"
                data-uid="newsId"
                v-model="commonHandle.newsId"
                @on-change="onChangeInput(`newsId`)"
                @on-enter="onChangeInput(`newsId`)"
                :readonly="true"
                :disabled="false">
            </h-input>
        </h-col>
    </h-row>

https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
https://stackoverflow.com/questions/19606221/copy-a-text-when-a-link-or-button-is-clicked
https://stackoverflow.com/questions/37381640/tooltips-highlight-animation-with-clipboard-js-click

http://codetheory.in/javascript-copy-to-clipboard-without-flash-using-cut-and-copy-commands-with-document-execcommand/

https://davidwalsh.name/clipboard

libs

https://clipboardjs.com/