当用户将内容粘贴到 HTML 元素中时执行脚本?

htmlweb developmentfront end technology更新于 2024/8/13 1:48:17

在本文中，我们将介绍如何在用户将内容粘贴到 HTML 元素中时执行脚本。

当用户将内容粘贴到元素中时，会触发 onpaste 事件。虽然所有 HTML 元素都接受 onpaste 事件，但您实际上无法将信息粘贴到 <p> 元素中，除非该元素将 contenteditable 设置为"true"。大多数 type="text" 的 <input> 组件都使用 onpaste 事件。让我们深入研究以下示例，以便更好地理解如何在用户将内容粘贴到 HTML 元素中时执行脚本。

示例 1

在以下示例中，我们将使用 HTML 中的 onpaste 事件。

<!DOCTYPE html>
<html>
<body>
   <input type="text" onpaste="mytutorial()" value="paste text on your wish" size="50">
   <script>
      function mytutorial() {
         alert("Content Pasted!");            
      }
   </script>
</body>
</html>

脚本执行后，将在网页上生成一个输出，显示一个填充了"粘贴您所需内容"文本的输入字段。

当用户尝试将内容粘贴到输入字段中时，会触发 onpaste 事件并显示警报。

示例 2:使用 Javascript

考虑以下示例，我们正在运行脚本以获取有关 onpaste 内容的警报。

<!DOCTYPE html>
<html>
<body>
   <input type="text" id="mytutorial" value="Welcome To Tutorialspoint" size="32">
   <script>
      document.getElementById("mytutorial").onpaste = function() {mytutorial1()};
      function mytutorial1() {
         alert("pasted content!");         
      }
   </script>
</body>
</html>

运行上述脚本后，它将生成一个输出，其中包含一个填写了"welcome to tutorialspoint"文本的输入字段。

如果用户尝试将内容粘贴到输入字段中，则会触发 onpaste 事件并在网页上显示警报。

使用 addEventListener() 方法

EventTarget 接口的 addEventListener() 方法创建一个函数，每次将提供的事件发送到目标时都会调用该函数。常见的目标包括 Element 或其后代、Document 和 Window，但任何支持事件的对象都可以用作目标(例如 XMLHttpRequest)。

示例

我们来看另一个示例，其中我们使用 addEventListener() 方法在粘贴内容时显示警报。

<!DOCTYPE html>
<html>
<body>
   <input type="text" id="mytutorial" value="The best e-way learning" size="25">
   <script>
      document.getElementById("mytutorial").addEventListener("paste", mytutorial1);
      function mytutorial1() {
         alert("you pasted content");
      }
   </script>
</body>
</html>

如果脚本执行，输出窗口将会弹出，并在网页上显示一个填入值的输入字段。

如果用户尝试将内容粘贴到输入字段中，则会触发事件并在网页上显示警报。