美文网首页
js剪切板

js剪切板

作者: 前端来入坑 | 来源:发表于2019-11-02 18:18 被阅读0次

    有时候网站需要用到验证码的复制剪切粘贴,这个时候就需要考虑到js的复制剪切粘贴事件了,这个好办,js自带了捕捉用户的复制剪切粘贴事件。但有时候需要做到点击按钮复制验证码,那这个要怎么操作呢?请听以下分解......。

    • oncopy 事件在用户拷贝元素上的内容时触发。
    <body>
    
    <input type="text" oncopy="myFunction()" value="尝试拷贝文本">
    <p id="demo"></p>
    <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "你拷贝了文本!"
    }
    </script>
    
    </body>
    
    • oncut 事件在用户剪切元素的内容时触发。
    <body>
    
    <input type="text" oncut="myFunction()" value="尝试剪切该文本">
    <p id="demo"></p>
    <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "你剪切了文本!";
    }
    </script>
    
    </body>
    
    • onpaste 事件在用户向元素中粘贴文本时触发。
    <body>
    
    <input type="text" onpaste="myFunction()" value="尝试在此处粘贴文本" size="40">
    <p id="demo"></p>
    <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "你粘贴了文本!";
    }
    </script>
    
    </body>
    

    • 点击按钮复制验证码
    <input style="border:none;" id="copyValue" value="我会被复制" readonly />
    <div class="btn" onClick="copy()">点击复制</div>
    <script>
    function copy(){
        var myCopy = document.getElementById("copyValue");
        myCopy.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        alert("已复制好,可贴粘。");
    }
    </script>
    

    相关文章

      网友评论

          本文标题:js剪切板

          本文链接:https://www.haomeiwen.com/subject/jabzvctx.html