HTML onpaste Event Attribute

HTMLWeb DevelopmentFront End Technology

The HTML onpaste attribute is triggered when user paste some content in an HTML element in an HTML document.

Syntax

Following is the syntax −

<tagname onpast=”script”></tagname>

Let us see an example of HTML onpaste event Attribute −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
   }
   p {
      border: 2px solid #fff;
      padding: 8px;
      text-align: justify;
   }
   textarea {
      border: 2px solid #fff;
      background: transparent;
      font-size: 1rem;
   }
   ::placeholder {
      color: #000;
      font-size: 1rem;
   }
</style>
</head>
<body>
<h1>HTML onpaste Event Attribute Demo</h1>
<p>
I'm a paragraph element with some dummy text. 
I'm a paragraph element with some dummy text. 
I'm a paragraph element with some dummy text. 
I'm a paragraph element with some dummy text. 
I'm a paragraph element with some dummy text.
</p>
<textarea placeholder="Paste above text here" onpaste="pasteFn()" rows='8' cols="50" required></textarea>
<script>
   function pasteFn() {
      document.querySelector('textarea').style.background = '#fff';
   }
</script>
</body>
</html>

Output

Now try to copy & paste paragraph text in the text area and observe how onpaste event attribute works −

raja
Published on 26-Sep-2019 10:50:44
Advertisements