数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中执行当用户粘贴内容到元素时的脚本？
在本文中，我们将介绍如何在用户将内容粘贴到 HTML 元素时执行脚本。
当用户将内容粘贴到某个元素时，会触发 onpaste 事件。尽管所有 HTML 元素都接受 onpaste 事件，但实际上你无法将信息粘贴到 <p> 元素中，除非该元素将 contenteditable 设置为“true”。大多数类型为“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
请考虑以下示例，我们正在运行脚本以获取关于粘贴内容的警报。
<!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>
运行上述脚本后，它将生成一个输出，其中包含一个在网页上填充了文本“欢迎来到 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>
如果脚本执行，输出窗口将弹出，在网页上显示一个填充了值的输入字段。
如果用户尝试将内容粘贴到输入字段中，则会触发该事件并在网页上显示一个警报。
105 次浏览
