js 實現復制到粘貼板功能

本文轉載自查看原文 2018-07-12 21:35 3967 工作經驗/ javascript

前言：js 或者 jquery 都可以實現的復制到粘貼板功能，有時還想要有換行等格式（同 textarea）

github地址：yuleGH github (喜歡記得star哦)

demo

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>

<head>
    <title>測試</title>
</head>

<body>
    <button id="btn1">復制自定義內容到粘貼板</button>

    <br/>
    框1
    <textarea id="txt"></textarea>

    <br/>
    <button id="btn2">復制框1內容到粘貼板</button>

    <br/>
    框2
    <textarea id="txt3"></textarea>
    <button id="btn3">復制框1內容到框2，同時到粘貼板</button>

    <script type="text/javascript">

        window.onload = function(){
            function copyValue(val){
                //如果這里換為 input 則不支持換行
                var temp = document.createElement('textarea');
                temp.value = val;
                document.body.appendChild(temp);
                temp.select(); // 選擇對象
                document.execCommand("Copy"); // 執行瀏覽器復制命令
                temp.style.display='none';
                console.log('復制成功');
            }


            document.getElementById("btn1").onclick = function () {
                copyValue("1234\n復制成功了\n而且有換行的呢");
            };

            document.getElementById("btn2").onclick = function () {
                copyValue(document.getElementById("txt").value);
            };

            function copyValue2(val){
                var oInput = document.getElementById('txt3');
                oInput.value = val;
                oInput.select(); // 選擇對象
                document.execCommand("Copy"); // 執行瀏覽器復制命令
                console.log('復制成功');
            }
            document.getElementById("btn3").onclick = function () {
                copyValue2(document.getElementById("txt").value);
            };
        };

    </script>
</body>

</html>

注意：如果需要支持換行則需要用 textarea

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue 實現復制到粘貼板功能 js把文字復制到粘貼板 jquery實現復制到粘貼板 js實現復制內容到粘貼板移動端復制到粘貼板 clipboardjs復制到粘貼板將文本復制到粘貼板上 Vue 復制到粘貼板原生js實現復制文本到粘貼板 js實現復制|剪切指定內容到粘貼板--clipboard