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>

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>

• javascript
• jquery
• html
• angularjs
• copy-paste

• how are you calling the function? – dsharew Commented May 15, 2015 at 11:09
• What type is event variable? Why do you think that it has clipboardData property? – Regent Commented May 15, 2015 at 11:09
• Also specify which browser you are testing your code. – dsharew Commented May 15, 2015 at 11:12
• Dude I never used angular can you put your code on jsfiddle so that you can help me setup the environment, I mean like include angular lib, jquery lib..etc – dsharew Commented May 15, 2015 at 14:26

1 Answer 1

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.