locked
Window paste Ctrl+V addEventListener not firing in IE 11 but firing in Chrome RRS feed

  • 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:

      https://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser

    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