Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

event.clipboardData is undefined

I am trying to access the paste event in the browser and override it. However event.clipboardData is undefined. Currently all I have is this:

function handlePaste (event) {

    event.preventDefault();

    console.log("Handling paste");
    console.log(event.clipboardData);
}

Edit:

It is part of a directive in Angular and I am running it in Chrome:

app.directive('safePaste', [function() {

function handlePaste (event) {

    event.preventDefault();

    console.log("Handling paste");
    console.log(event.clipboardData);
}

/*
 * Declaration
 */
var declaration = {};

declaration.restrict = 'A';

declaration.link = function(scope, element, attr) {
    // Attach the paste handler
    element.on('paste', handlePaste);

    // Register to remove the paste handler
    scope.$on('$destroy', function() {
        element.off('paste', handlePaste);
    });
};

return declaration;
} 
]);

HTML:

<li ng-repeat="note in notes | reverse">
     <a id="note" href="#">
        <h2 id="note-title" data-note-id="{{ note.id }}" safe-paste> {{ note.title | limitTo : 16 }}</h2>
            <p id="note-content" data-note-id="{{ note.id }}" safe-paste> {{ note.text | limitTo : 200 }} </p>
            <p id="info-note-save" hidden="true" class="text-center">Press enter to save</p>
     </a>
</li>
like image 768
user1724416 Avatar asked May 15 '15 11:05

user1724416


People also ask

What is window clipboardData?

clipboardData property holds a DataTransfer object, which can be used: to specify what data should be put into the clipboard from the cut and copy event handlers, typically with a setData(format, data) call; to obtain the data to be pasted from the paste event handler, typically with a getData(format) call.

How do I find clipboard data?

To get to your clipboard history at any time, press Windows logo key + V. From the clipboard history, you can paste and pin frequently used items by choosing an individual item from your clipboard menu.

What is clipboard event?

The ClipboardEvent interface represents events providing information related to modification of the clipboard, that is cut , copy , and paste events.

Which of the following methods can be used for retrieving the specified formatted data from the clipboard?

To retrieve data from the Clipboard, use one of the Get Format methods or the GetData method. These methods are new in . NET Framework 2.0.


1 Answers

I had a similar issue recently where I tried to intercept the paste event. I was using the code from here:

function handlePaste (e) {
    var clipboardData, pastedData;

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();

    if(pastedData.indexOf('E')>-1) {
        //alert('found an E');
        e.stopPropagation();
        e.preventDefault();
    }
};

I changed the clipboardData line instead to

clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;

And now it's working fine.

like image 196
Yusuf Avatar answered Sep 21 '22 02:09

Yusuf