JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editable-div" contenteditable>

<input type="text" id="myInput" value="Try to paste something in here" onpaste="alert('calice')" size="40">


<input type="text" id="myInput" value="Try to paste something in here" onpaste="alert('calice')" size="40">


<input type="text" id="myInput" value="Try to paste something in here" onpaste="alert('calice')" size="40">


<input type="text" id="myInput" value="Try to paste something in here" onpaste="alert('calice')" size="40">


</div>

CSS

#editable-div {
    border: solid 1px #444444;
    min-height: 50px;
    border-radius: 8px;
    padding: 10px;
}

JavaScript

$(document).ready(function(){
    var editable = document.getElementById('editable-div');
    var pasteHandler = function(e){
        if(e.clipboardData && e.clipboardData.getData) {
            var pasteText = e.clipboardData.getData('text/plain');
            alert(pasteText);
        }
        else{
            alert('Not paste object!');
        }
    };
    editable.addEventListener('paste', pasteHandler, false);
});