Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Execute a script when the user pastes some content in an element in HTML?
In this article, we are going to execute a script when the user pastes content into an element in HTML.
When a user pastes content into an element, the onpaste event is triggered. Although all HTML elements accept the onpaste event, you cannot actually paste information into a <p> element, unless the element has set contenteditable to "true." Most <input> components with type="text" employ the onpaste event.Let’s dive into the following examples to get better understanding on executing a script when the user pastes some content in an element in HTML.
Example 1
In the following examples we are using onpaste event using html.
<!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>
When the script gets executed, it will generate an output displaying the input field filled with text, "paste text on your wish" on the webpage.
When the user tries to paste the content inside the input field, the onpaste event gets triggered and displays an alert.
Example 2 : Using Javascript
Consider the following example we are running script to get alert for onpaste content.
<!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>
On running the above script, it will generate an output consisting of an input field of text "welcome to tutorialspoint" filled on the webpage.
If the user tries to paste the content into the input field, the onpaste event gets triggered and displays an alert on the webpage.
Using addEventListener() method
The EventTarget interface's addEventListener() method creates a function that will be called each time the provided event is sent to the target. Common targets include Element or its descendants, Document, and Window, although any object that supports events may serve as a target (such as XMLHttpRequest ).
Example
Let’s look another example, where we are using addEventListener() method to display alert when content pasted.
<!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>
If the script gets executed, the output window will pop up, displaying an input field with a value filled in it on the webpage.
If the user tries to paste the content into the input field, the event gets triggered and displays an alert on the webpage.
80 Views
To Continue Learning Please Login