数据结构
网络
RDBMS
操作系统
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
考虑以下示例，我们正在运行脚本以获取 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>
运行上述脚本后，它将生成一个输出，其中包含在网页上填充的文本“欢迎来到 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>
如果脚本执行，输出窗口将弹出，在网页上显示一个带有填充值的输入字段。
如果用户尝试将内容粘贴到输入字段中，则会触发事件并在网页上显示一个警报。
更新于： 2022年12月16日
104 次查看
广告