Text-related events and their processing in JavaScript - ProgrammerTech
Language:

Search

Text-related events and their processing in JavaScript

  • Share this:
Text-related events and their processing in JavaScript

Script-related events in JavaScript

JavaScript script events, sometimes if someone is copying, pasting or cutting from your site content and you want to execute a JavaScript command. We will explain this method to you, and we have 3 elements for text events, which are:

  1. oncopy.
  2. onpaste.
  3. oncut.

 

oncopy event in javascript

For copying, we use the oncopy event and there are three ways to implement the oncopy event. We will take examples to understand them more.

Example 1

<h1 oncopy="copy()">Programmer Tech</h1>
.
function copy(){
	alert("Text copied");
}

We created the h1 element in the html file and put a copy function in it and the word Programmer Tech. And in javascript we created a function called copy() which is in the html file and then put the display of the process via alert. When we do a copy operation of the h1 element that we selected directly, the javascript commands are executed and the dialuk gives us "text copied". But if we want to copy a specific part of the entire page, we put the oncopy command within the body tag so that the commands cover the entire body of the page, that is, everything we see on the page.

<body oncopy="copy()">
	<h1>Programmer Tech</h1>
</body>

We will notice that when you click on any text from the page, the commands will be executed, unlike the first example, which was only on a specific part of the page, which is h1 when copied, the commands will be executed.

Example 2

It is done via a JavaScript file in the document.addEventListener element as in the following example.

document.addEventListener('copy',function coppy(){
	alert("Text copied")
})

The result will be as in the two examples above, working successfully by executing the commands we specified in the function when doing the copy. If we want to execute commands on a specific element only we use variables.

<h1 id="text">Programmer Tech</h1>
.
var text = document.getElementById("text");
text.addEventListener('copy',function copy(){
	alert("Text copied");
})

We created the h1 element and put it in text with the word Programmer Tech inside this tag. In the JavaScript code, we create a variable called text and assign it to print the text via getElementById. Then we wrote the name of the variable and displayed the data via alert that tells us the text has been copied.

Example 3

We will often use the method because newer versions are better at handling it.

class MyPage{
	constructor() {
		var text = document.getElementById("text");
		text.addEventListener('copy',()=>{
			this.copy();
		});
	}
	copy(){
		alert("Text copied");
	}
}
onload = new MyPage();

We created a class named MyPage and a constructor and then created a text variable and attached it to hands in html. Then we chose addEventListener and gave the commands copy which is executed and the way to display the data is via an alert dialer popup and all this starts when the page is loaded.

 

oncut event in javascript

It is used in the same way as copying, just change the commands to oncut.

<input type="text" id="text"/>
.
class MyPage{
	constructor() {
		var text = document.getElementById("text");
		text.addEventListener('cut',()=>{
			this.copy();
		});
	}
	copy(){
		alert("The text has been cut");
	}
}
onload = new MyPage();

When you cut any text from the page, the commands will be executed directly. To execute commands across the site, we put document before addEventListener.

class MyPage{
	constructor() {
		var text = document.getElementById("text");
		documnt.addEventListener('cut',()=>{
			this.copy();
		});
	}
	copy(){
		alert("The text has been cut");
	}
}
onload = new MyPage();

Commands here will be executed over the entire body of the page.

 

onpaste event in javascript

Same principle as copy and cut operations, just change the command to onpaste.

<input type="text" id="text" onpaste="cut()"/>
.
class MyPage{
	constructor() {
		var text = document.getElementById("text");
		text.addEventListener('paste',()=>{
			this.paste();
		});
	}
	paste(){
		alert("Text is pasted");
	}
}
onload = new MyPage();
function cut(){
	alert("Text is pasted");
}

 

onchange event in javascript

Onchange event, sometimes when the user selects an option within the select option, you want to execute the commands you want. Through onchange this can be done, there are two ways to do the same. We will explain both.

Example 4

This method is by writing commands within the html tag directly via onchange. Suppose we have a select element with three options that we will use to change the background of the site.

<select>
	<option value="red">red</option>
	<option value="yellow">yellow</option>
	<option value="blue">blue</option>
</select>

The menu in the browser will look like.

As you may have noticed, we will have an empty normal menu with the options that have been selected. We want if the user selects one of the specified colors, javascript commands are executed to change the background color. Commands can be added directly within the select and using the onchange element and then put the JavaScript commands that we want to select.

<select id="color" onchange= "document.body.style.background=
document.getElementById('color').value;">
	<option value="red">red</option>
	<option value="yellow">yellow</option>
	<option value="blue">blue</option>
</select>

We have set the color hands for easy access and then use the onchange property to execute the JavaScript commands. And we set the body, meaning that the change gets to the entire body of the page, and we chose that the background of this page is changed. And the hands were accessed via document and we chose color within vocabulary quotation marks (here, double quotation marks are not accepted). And when you open it in the browser, when the user chooses a yellow color, the yellow background is changed immediately, and the same is true if he chooses the rest of the options.

Example 5

This method is via addEventListener and choose the commands you want to be executed.

document.getElementById("color").addEventListener("change", ()=>{
	document.body.style.background = document.getElementById('color').value;
});

The result will be exactly the same as before when choosing any color to change the background to.


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com