Thuộc tính sự kiện onpaste trong HTML

Thuộc tính sự kiện onpaste trong HTML được kích hoạt khi người dùng dán (paste) nội dung nào đó vào một phần tử HTML trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

<tagname onpaste="script"></tagname>

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính sự kiện onpaste trong HTML:

<!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>Demo thuộc tính sự kiện onpaste trong HTML</h1>
<p> Tôi là một phần tử đoạn văn với một số văn bản giả. Tôi là một phần tử đoạn văn với một số văn bản giả. Tôi là một phần tử đoạn văn với một số văn bản giả. Tôi là một phần tử đoạn văn với một số văn bản giả. Tôi là một phần tử đoạn văn với một số văn bản giả. </p>
<textarea placeholder="Dán văn bản trên vào đây" onpaste="pasteFn()" rows='8' cols="50" required></textarea>
<script>
  function pasteFn() {
    document.querySelector('textarea').style.background = '#fff';
  }
</script>
</body>
</html>

Kết quả

Bây giờ hãy thử sao chép & dán văn bản đoạn văn vào khu vực văn bản và quan sát cách thuộc tính sự kiện onpaste hoạt động: