Match the style of <pre> element while performing paste - jQuery?

jQuery Web Development Front End Technology

For this, use <pre> tag. Set it to contenteditable −

<pre id="data" contenteditable></pre>

We have set the following style for paste −

<style>    pre {       min-height: 150px;       min-width: 300px;       font-family: 'Times New Roman', Times, serif;       white-space: pre;       background-color: rgb(19, 22, 27);       color: #98d8e7;    } </style>

Now, you can use paste event listener −

var getTheData = document.getElementById('data'); getTheData.addEventListener('paste', PutTheDataOnEditor);

Example

Following is the code −

Live Demo

<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> pre {    min-height: 150px;    min-width: 300px;    font-family: 'Times New Roman', Times, serif;    white-space: pre;    background-color: rgb(19, 22, 27);    color: #98d8e7;   } </style> <body>    <pre id="data" contenteditable></pre> </body> <script>    function PutTheDataOnEditor(event) {       event.preventDefault();       const textData = event.clipboardData.getData("text");       event.target.innerHTML = textData;       console.log(textData);    } var getTheData = document.getElementById('data'); getTheData.addEventListener('paste', PutTheDataOnEditor); </script> </html>