Answered by:
Window paste Ctrl+V addEventListener not firing in IE 11 but firing in Chrome

Question
-
User1036972001 posted
Hi,
This is my code that works perfectly in chrome browser
window.addEventListener("paste", pasteHandler); //chrome
The problem is in IE11 browser when select
Ctrl+V
is never fired on the clipboard.I have tried this without success
if (window.addEventListener) { alert("firefox, chrome, etc"); window.addEventListener("paste", pasteHandler, false); } else if (window.attachEvent) { alert("IE"); window.attachEvent("paste", pasteHandler); }
Why is that?
My code below
var canvas = document.getElementById("cc"); var ctx = canvas.getContext("2d"); if (window.addEventListener) { alert("firefox, chrome, etc"); window.addEventListener("paste", pasteHandler, false); } else if (window.attachEvent) { alert("IE"); window.attachEvent("paste", pasteHandler); } function pasteHandler(e) { if (e.clipboardData == false) return false; //empty var items = e.clipboardData.items; if (items == undefined) return false; for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf("image") == -1) continue; //not image var blob = items[i].getAsFile(); var URLObj = window.URL || window.webkitURL; var source = URLObj.createObjectURL(blob); paste_createImage(source); } }
Monday, October 5, 2020 12:40 PM
Answers
-
User-474980206 posted
your first bug is IE does not support a script block inside a canvas. move the script outside and the event handler will be called.
your second bug, is an IE clipboardData is a window object, not on the event.
your third bug is an IE 11 clipboardData does not have an .items property.
your fourth bug is an IE 11 clipboardData does not have blob support, just text:
var text = window.clipboardData.getData("text")
to support IE 11, you will need to use the file object to select an image, and not use paste.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, October 5, 2020 7:29 PM
All replies
-
User-474980206 posted
is your IE 11 in ie 11 mode? the addEventListener should work. the handler won't because in IE clipboardData is global. also you use getData('text'):
//ie 11
var data = window.clipboardData.getData('text');it appear you need the html. this is a little tricker. you need to copy the clipboard to a hidden div, then access the html in the div. follow this thread:
note: its old, so msdn links don't work.
Monday, October 5, 2020 3:21 PM -
User1036972001 posted
Thank you for help.
But I need saving clipboard images to file in C#
Working only on Google Chrome browser
But not working on Internet explorer 11 browser
On IE11 browser when select
Ctrl+V
is never fired on the clipboard.my complete code below
code markup and code behind
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <h2>Welcome to ASP.NET! </h2> 1. Copy image data into clipboard or press Print Screen <br /> 2. Press Ctrl+V (page/iframe must be focused): <br /> <br /> <canvas style="border: 1px solid grey;" id="cc" width="200" height="200"> <script type="text/javascript"> var canvas = document.getElementById("cc"); var ctx = canvas.getContext("2d"); //=== Clipboard =============================== //window.addEventListener("paste", pasteHandler); //chrome if (window.addEventListener) { alert("firefox, chrome, etc"); window.addEventListener("paste", pasteHandler, false); } else if (window.attachEvent) { alert("IE"); window.attachEvent("paste", pasteHandler); } //handler function pasteHandler(e) { if (e.clipboardData == false) return false; //empty var items = e.clipboardData.items; if (items == undefined) return false; for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf("image") == -1) continue; //not image var blob = items[i].getAsFile(); var URLObj = window.URL || window.webkitURL; var source = URLObj.createObjectURL(blob); paste_createImage(source); } } //draw pasted object function paste_createImage(source) { var pastedImage = new Image(); pastedImage.onload = function () { ctx.drawImage(pastedImage, 0, 0); } pastedImage.src = source; } </script> </canvas> <br /> <input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" /> <script type="text/javascript"> $(function () { $("#btnSave").click(function () { var image = document.getElementById("cc").toDataURL("image/png"); image = image.replace('data:image/png;base64,', ''); $.ajax({ type: 'POST', url: 'Default3.aspx/UploadImage', data: '{ "imageData" : "' + image + '" }', contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (msg) { alert('Image saved successfully !'); } }); }); }); </script> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; using System.Web.Script.Services; using System.Web.Services; [ScriptService] public partial class Default3 : Page { static string path = @"C:\Users\A\source\repos\CopyPaste\public\"; [WebMethod()] public static void UploadImage(string imageData) { string fileNameWitPath = path + DateTime.Now.ToString("ddMMyyyyHHmmss").Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png"; using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create)) { using (BinaryWriter bw = new BinaryWriter(fs)) { byte[] data = Convert.FromBase64String(imageData); bw.Write(data); bw.Close(); } } } protected void Page_Load(object sender, EventArgs e) { } }Monday, October 5, 2020 4:11 PM -
User-474980206 posted
your first bug is IE does not support a script block inside a canvas. move the script outside and the event handler will be called.
your second bug, is an IE clipboardData is a window object, not on the event.
your third bug is an IE 11 clipboardData does not have an .items property.
your fourth bug is an IE 11 clipboardData does not have blob support, just text:
var text = window.clipboardData.getData("text")
to support IE 11, you will need to use the file object to select an image, and not use paste.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, October 5, 2020 7:29 PM