Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Solution for onpaste in Opera <= 11.11

$('#sometextarea')
    .change(function(){console.log($(this).val());})
    [0].onpaste=function(){
        var self=$(this);
        var intr=setInterval(function(){
            if(self.val().length) {
                clearInterval(intr);
                self.blur();                                                                    
            }
        },10);                          
    }

onpaste doesn't work in Opera.

Can someone suggest better solution for this task?

Because I don't like that I have to use setInterval/setTimeout and emulate change event. Because if using triggerHandler('change') causes second event triggering on user blur, don't know why actually, it shouldn't by idea, because data isn't changed after first triggerHandler('change')

Need a solution to capture val() before user exits textarea, mouse paste should be captured as well.

like image 319
Somebody Avatar asked Feb 13 '26 05:02

Somebody


1 Answers

I know this is little late to the party, but I've been working on capturing paste events in the browser. I'm still working on the code but what I have so far is at http://jsfiddle.net/JgU37/42/.

the gist of the code is below:

$(document).ready(function() {
    // Fake paste
    var doFakePaste = false;
    $(document).on('keydown', function(e) {
        $('#status').html('metaKey: ' + e.metaKey + 
                          ' ctrlKey: ' + e.ctrlKey + 
                          ' which: ' + e.which);

        // These browser work with the real paste event
        if ($.client.browser === "Chrome")
            return;
        if ($.client.os === "Windows" && $.client.browser === "Safari")
            return;

        // Check for patse keydown event
        if (!doFakePaste &&
            ($.client.os === "Mac" && e.which == 86 && e.metaKey) ||
            ($.client.os !== "Mac" && e.which == 86 && e.ctrlKey)) {
            doFakePaste = true;
            // got a paste
            if (!$("*:focus").is("input") &&
                !$("*:focus").is("textarea")) {
                $('#status').html('fake paste');

                // Focus the offscreen editable
                $('#TribblePaste').focus();

                // Opera doesn't support onPaste events so we have
                // to use a timeout to get the paste
                if ($.client.browser === "Opera")
                {
                    setTimeout(function() {
                        doFakePaste = false;
                        var html = $('#TribblePaste').html();
                        var text = $('#TribblePaste').text();
                        if (text == '') text = $('#TribblePaste').val();
                        $('#resultA').text('[o] '+html);
                        $('#resultB').text('[o] '+text);
                        $('#TribblePaste').val('');
                        $('#TribblePaste').text('');
                        $('#TribblePaste').blur();
                    }, 1);
                }
            }
        }
    }).on('paste', function (e) {
        // Firefox is not supported - they don't
        // expose the real clipboard
        if ($.client.browser === 'Firefox')
            return;

        $('#status').html('paste event');

        // real pasteing
        var html = '';
        var text = '';
        if (window.clipboardData) // IE
        {  
            text = window.clipboardData.getData("Text");
        }
        if (e.clipboardData && e.clipboardData.getData) // Standard
        {
            text = e.clipboardData.getData('text/plain');
            text = e.clipboardData.getData('text/html');
        }
        if (e.originalEvent.clipboardData &&
            e.originalEvent.clipboardData.getData) // jQuery
        {
            text = e.originalEvent.clipboardData.getData('text/plain');
            html = e.originalEvent.clipboardData.getData('text/html');
        }
        $('#resultA').text(html);
        $('#resultB').text(text);
    });

    // Setup the offscreen paste capture area
    $('<textarea contenteditable id="TribblePaste"></textarea>').css({
        'position': 'absolute',
        'top': '-100000px',
        'width': '100px',
        'height': '100px'
    }).on('paste', function(e) {
        setTimeout(function() {
            doFakePaste = false;
            var html = $('#TribblePaste').html();
            var text = $('#TribblePaste').text();
            if (text == '') text = $('#TribblePaste').val();
            $('#resultA').text(html);
            $('#resultB').text(text);
            $('#TribblePaste').val('');
            $('#TribblePaste').text('');
            $('#TribblePaste').blur();
        }, 1);
    }).appendTo('body');

    $('#data').html('os: ' + $.client.os + ' browser: ' + $.client.browser);
});
like image 115
Justin808 Avatar answered Feb 15 '26 18:02

Justin808



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!