Edit events are events that are executed when content in the browser is modified or moved. They are a collection of events that are triggered when the selected content in the browser is copied, cut, and pasted, as well as when an object is dragged with the mouse.
Text editing event
Text editing events are events that are triggered when you copy, cut, paste, and select content in your browser.
Onbeforecopy is the event handler that is triggered when the web page content is copied to the clipboard. Onbeforecopy is the event handler that is triggered when the web page content is copied to the clipboard. The onCopy event triggers an event handler when content is copied in a Web page. For example: Do not copy the content of a web page
Code:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body oncopy="return no()">
<marquee behavior="alternate" >China Internet of Things University-Enterprise Alliance defines the Internet of Things as the combination of almost all current technologies with computers and Internet technologies to realize the real-time sharing of environment and state information between objects and intelligent collection, transmission, processing and execution. Broadly speaking, the current application of information technology can be included in the category of the Internet of Things.</marquee>
</body>
<script type="text/javascript">
function no(){
alert("This page is not allowed to be copied");
return false;
}
</script>
</html>
Copy the codeNote that if the custom function name is called in the onBeForecopy and onCopy events, the retum statement must precede the function name. Otherwise, regardless of whether the function returns true or false, the current event returns the true value, that is, replication is allowed.
In fact, if you want to disable the copy function in the web page, you can do this directly by using JavaScript statements in the <body> tag onBeForecopy or onCopy event. The code is as follows:
<body oncopy="return false">
</body>
Copy the code
2. Cut events
The clipping event triggers the event handler when the selected content is clipped in the browser. The clipping event has two events, onBeforecut and oncut. The onBeforecut event is one of the forecut events in the page. The oncut event handler is triggered when some or all of the content is clipped to the viewer’s system clipboard. Example: Mask clipping operations in a text box
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body oncut="return nocut()">
<marquee >China Internet of Things University-Enterprise Alliance defines the Internet of Things as the combination of almost all current technologies with computers and Internet technologies to realize the real-time sharing of environment and state information between objects and intelligent collection, transmission, processing and execution. Broadly speaking, the current application of information technology can be included in the category of the Internet of Things.</marquee>
</body>
<script type="text/javascript">
function nocut(){
alert("Clipping is not allowed on this page");
return false;
}
</script>
</html>
Copy the code
3. Paste events
The paste events are onbeforePaste and onpaste.
The onbeforePaste event is an event handler that is triggered when content is pasted onto a page from the viewer’s system clipboard. You can use this event to prevent the user from pasting the authentication information, such as the password text box and confirm password text box.
Example: When pasting text to a text box, use the onbeforePaste event to empty the clipboard so that it cannot paste data into the text box.
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<form name="form1" method="post">
<input type="text" name="field" onbeforepaste="return clearup()" />
</form>
</body>
<script type="text/javascript">
function clearup(){
window.clipboardData.setData("text".""); // Empty the clipboard
}
</script>
</html>
Copy the code
4. Object drag event
There are two ways to implement drag-and-drop functionality in JavaScript: system drag-and-drop and simulated drag-and-drop. Microsoft for IE to provide drag and drop events have two types, the class is drag and drop object events, alternative is to place the target event. The events contained in these two categories are described below.
1. Drag and drop object events
Drag-and-drop object events include onDrag, onDragEnd, and onDragStart events.
The onDrag event triggers the event handler when an object is dragged.
The onDragEnd event triggers the event handler when the mouse drag ends, that is, when the mouse button is released.
The onDragStart event triggers the event handler when an object is about to be dragged, that is, when the mouse is down and the mouse begins to move. For example, when a picture is dragged, the dragging status of the picture is displayed in the title bar of the window. That is, when you are about to drag an image, show dragStart in the title bar; When dragging a picture, display drag in the title bar: When the drag ends, display dragend in the title bar.
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="form1" method="post">
<input name="img" type="image" src="img/banner01.png" ondrag="drag(event)" ondragend="drag(event)" ondragstart="drag(event)"/>
</form>
<script type="text/javascript">
function drag(event){
document.title=Event.type; // Write the corresponding event type name in the title bar of the window
}
</script>
</body>
</html>
Copy the codePay attention to
When dragging an object, the onDragEnd event is usually used to end the dragging operation.
2. Place the target event
The drop target events include onDragOver, onDragEnter, onDragLeave, and onDrop events.
The onDragover event triggers the event handler when one of the dragged objects is dragged within the scope of another object container.
The onDragEnter event is the event handler that fires when an object is dragged by the mouse into its container scope.
The onDragLeave event is triggered when the mouse-dragged object is out of its container scope, that is, when the dragover stops firing and the object is dragged out of the drop target.
The onDROP event triggers the event handler when the mouse is released during a drag, that is, when the dragged object releases the mouse over another container, the DROP event is triggered instead of the dragleave event.
Example: A simple instance of placing a target event
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="330px" height="136px" border="1px">
<tr>
<td id="td1" align="center" width="165" height="136px">
<input name="img" type="image" src="img/banner01.png" width="150px" height="120px" border="0"/>
</td>
<td id="td2" align="center" width="165" height="136px"
ondragenter=""
ondragover=""
ondragleave=""
ondrop=""></td>
</tr>
</table>
<script type="text/javascript">
function dragobject(event){
switch(event.type){
case "dragover":
{
document.title="Drag within the target container";
break;
}
case "dragenter":
{
document.title="Enter target container range";
break;
}
case "dragleave":
{
document.title="Object leaves target container";
break;
}
case "drop":
{
document.title="Drop the object in the target container";
break; }}}</script>
</body>
</html>
Copy the code