資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
