JSFiddle - React, Tailwind, and code Playground

Paste catcher in jquery

by Ben Clayton

HTML

<body class="capture-paste">

<div id="paste-output"></div>


    <div>
    <textarea id="area" style=""></textarea>
    </div>

</body>

CSS

#paste-output {border:red 1px solid;height:100px}
#area {border:green 1px solid;}

JavaScript

// this may be handy to see keycode  http://keycodes.atjayjo.com/ 
$(document).ready(function(){
   
    var ctrlDown = false;
    var ctrlKey = 17, vKey = 86, cKey = 67;
    
    $(document).keydown(function(e)
    {
        if (e.keyCode == ctrlKey) ctrlDown = true;
    }).keyup(function(e)
    {
        if (e.keyCode == ctrlKey) ctrlDown = false;
    });
    
    $(".capture-paste").keydown(function(e){
        if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){
            $("#area").css("display","block");
            $("#area").focus();         
        }
    });
    
    $(".capture-paste").keyup(function(e){
        if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){                      
            $("#area").blur();
            //do your sanitation check or whatever stuff here
            $("#paste-output").text("YY"+$("#area").val());
            $("#area").val("");
            $("#area").css("display","none");
        }
    });

});