I have a script that prevents the user from pasting, or dropping dragged images into a contenteditable area. When the user tries to do one of those two things, I want an alert to tell him he cannot do that. I tried adding alert("custom message")
right before the last break. But it gets triggered in both cases (pasting and dropping). How can I have two different alerts: one for when the user pastes an image ("you cannot paste images here"), and another for when the user drops a dragged image ("you cannot drop images here", within my code?
https://jsfiddle.net/36cfdpoh/
window.onload = function() { document.getElementById("editDiv").oninput = function() { var thisElement = this; var currentElementChildren, currentElementChildrenLength; var elements = this.children; var elementsLength = elements.length; if (elementsLength > 0) { for (i = 0; i < elementsLength; i++) { if (elements[i].tagName == "IMG") { thisElement.children[i].remove(); break; } else { currentElementChildren = elements[i].children; currentElementChildrenLength = currentElementChildren.length; if (currentElementChildrenLength > 0) { for (ii = 0; ii < currentElementChildrenLength; ii++) { if (currentElementChildren[ii].tagName == "IMG") { thisElement.children[i].children[ii].remove(); alert("you cannot drop images here"); break; } } } } } } } }
#editDiv { width: 250px; height: 50px; border: solid 1px #000; margin-bottom: 20px; } img { width: 250px; }
<div id="editDiv" contenteditable="true"> <p>Try to drop or paste that image here.</p> </div> <img src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">
There are two solutions to this. Using the input
event or using drop
and paste
events:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Image phobia</title>
</head>
<body>
<h1>Image phobia</h1>
<div id="editDiv" contenteditable="true">
<p>Try to drop or paste that image here.</p>
</div>
<img height="100" width="100" src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">
<img height="100" width="100" src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">
<script src="main.js" />
</body>
</html>
input
event solution:
main.js
"use strict";
(function() {
window.addEventListener("load", () => {
const editDiv = document.getElementById("editDiv");
// return a message depending on input type
function alertMessage(type) {
switch (type) {
case "insertFromPaste":
return "You can't paste images here";
case "insertFromDrop":
return "You can't drop images here";
}
}
// recursive function to delete image from an element's children
function removeImages(children) {
let hadImage = false;
for (let i = children.length - 1; i >= 0; i--) {
const child = children[i];
if (child.tagName === "IMG") {
child.remove();
hadImage = true;
continue;
}
if (child.children.length) {
hadImage = removeImages(child.children);
if (hadImage) {
break;
}
}
}
return hadImage;
}
function preventImageInput(e) {
const inputType = e.inputType;
if (inputType === "insertFromDrop" || inputType === "insertFromPaste") {
if (e.target.children.length) {
const hadImage = removeImages(e.target.children);
if (hadImage) {
alert(alertMessage(inputType));
}
}
}
}
editDiv.addEventListener("input", preventImageInput);
});
})();
drop
and paste
events solution:
main.js
"use strict";
(function() {
window.addEventListener("load", () => {
const editDiv = document.getElementById("editDiv");
// return message depending on event type
function alertMessage(type) {
switch (type) {
case "paste":
return "You can't paste images here";
case "drop":
return "You can't drop images here";
}
}
function preventImageInput(e) {
// you must use setTimeout because when both the paste or drop events are fired
// the content isn't changed yet and you won't have access to the new content
setTimeout(() => {
const images = e.target.querySelectorAll("img");
if (images.length) {
for (let i = images.length - 1; i >= 0; i--) {
const image = images[i];
image.remove();
}
alert(alertMessage(e.type));
}
});
}
editDiv.addEventListener("paste", preventImageInput);
editDiv.addEventListener("drop", preventImageInput);
});
})();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.