3
\$\begingroup\$

I'm looking for a review of my current code. It is supposed to capture a paste in the browser window, regardless of the element with focus. This is not the final form as I will be converting it into a jQuery plugin but I'm looking for a review of the logic behind the code.

jfiddle: http://jsfiddle.net/JgU37/44/

$(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
    $('<div contenteditable id="TribblePaste"></div>').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);
});

On a side note, if you try it in a browser thats not listed (in the fiddle), or in one that is listed and get a different result, please post a comment :)

\$\endgroup\$
  • \$\begingroup\$ Maybe some words about what the code supposed to do would be useful :-) \$\endgroup\$ – palacsint Dec 18 '11 at 19:48
  • 4
    \$\begingroup\$ Pro tip: named functions or objects for code organization. All you have now is a single function that does everything. It's like putting all your code in main \$\endgroup\$ – Raynos Dec 18 '11 at 19:50
3
\$\begingroup\$

You need to detect the browser only once, not on each keypress.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ I agree ... its not like it will change between key-presses ... unless something is seriously wrong. \$\endgroup\$ – James Khoury Dec 18 '11 at 22:37
0
\$\begingroup\$

You're overwriting in the paste handlers, you should chain the ifs with elses:

    // Reverted order to ensure we get the same result as with the previous code version.
    if (e.originalEvent.clipboardData &&
        e.originalEvent.clipboardData.getData) // jQuery
    {
        text = e.originalEvent.clipboardData.getData('text/plain');
        html = e.originalEvent.clipboardData.getData('text/html');
    }
    else if (e.clipboardData && e.clipboardData.getData) // Standard
    {
        text = e.clipboardData.getData('text/plain');
        text = e.clipboardData.getData('text/html');
    }
    else if (window.clipboardData) // IE
    {  
        text = window.clipboardData.getData("Text");
    }
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.