jQuery 之 检测剪切,复制或粘贴事件

如果您参与的项目涉及具有客户端输入验证的动态UI,那么您可以回想起QA /测试人员之间非常普遍的做法,即他们试图复制大量垃圾文本以创建无效的场景并将它们记录为错误。我不会评论这类问题的有效性。在本文的这篇文章中,我将为您提供一个解决方案,如果遇到此问题,您可以使用该解决方案。

请注意,这将始终有效。无论您使用键盘还是鼠标生成这些事件。

jquery_logo

阅读更多:按键事件击键事件以及“ 检测” ENTER键之间的区别

检测剪切复制或粘贴事件

要检测这些事件,您需要以给定的方式为任何输入区域绑定以下事件。

$(document).ready(function() {
    $("#textA").bind({
        copy : function(){
        $('#message').text('copy behaviour detected!');
        },
        paste : function(){
        $('#message').text('paste behaviour detected!');
        },
        cut : function(){
        $('#message').text('cut behaviour detected!');
        }
    });
});

尝试一下

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <style type="text/css">
        span{
            color:green;
            font-weight:bold;
        }
        </style>
    </head>
    <body>
        <h1>Detect Cut, Copy and Paste with jQuery</h1>
        <form action="#">
            <label>Text Box : </label>
            <input id="textA" type="text" size="50" value="Copy, paste or cut any text here" />
        </form>
        <span id="message"></span>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#textA").bind({
                copy : function(){
                $('#message').text('copy behaviour detected!');
                },
                paste : function(){
                $('#message').text('paste behaviour detected!');
                },
                cut : function(){
                $('#message').text('cut behaviour detected!');
                }
            });
        });
        </script>
    </body>
</html>

学习愉快!

saigon has written 1440 articles

Leave a Reply