August 23, 2021

How to Detect Paste Event in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to detect paste event in javascript. The paste event is triggered when you paste something in the HTML element. The two most common elements that fit this scenario are input and textarea.

Generally, it is not required to play with paste event but there are certain scenarios where you must execute a certain piece of code as soon as the user pastes something in the HTML element.

As soon as the paste event gets triggered, you can make your checks against the data that has been pasted or you can modify it depending upon your requirement.

A simple example could be an input field that is only going to accept letters, not numbers. You can run your validation after the paste event is fired and show a warning message to the user.

Like other events such as keyup, click, load, etc., we also have paste event which we can attach to the element of our choice. Like I said above, input and textarea are 2 elements where it makes sense.

In the following example, we have 2 elements input and h1. We are simply going to copy text from the h1 element and paste it into the input element. Now, the point to be noted here is that the text in the h1 element is in lowercase. After pasting it in the input element, I want to convert it into uppercase. Please have a look over the code example and steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, input, and h1). The div element is just a wrapper for the rest of the elements.
The inner text for the h1 element is “this is in lowercase”.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <input type="text">
        <h1>this is in lowercase</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

input {
    padding: 10px;
}

Javascript

We have selected the input element using the document.querySelector() method and stored it in inputEl variable.
We have attached a paste event listener to the input element.
In the event handler function, we are using the event object to get the text from the clipboard. The event object contains a clipboardData property which holds a DataTransfer object. In this object, we have the getData() method. We are using this method to get the text and storing it in the myText variable.

We are converting text into uppercase and setting it as the value of input element.
After doing the above, we have to prevent the default behavior of the paste event. Otherwise, we will have both lowercase and uppercase texts as a value in the input element. We are preventing default behavior by calling the preventDefault() method.

let inputEl = document.querySelector('input');

inputEl.addEventListener('paste', (e) => {    
    const myText = e.clipboardData.getData('text')
    inputEl.value = myText.toUpperCase();
    e.preventDefault();
})

You May Also Like: