review of work-in-progress javascript - Capture pastes in browser

Question

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

• palacsint: Maybe some words about what the code supposed to do would be useful :-)
• Raynos: 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

Answer 1

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

• James Khoury: I agree ... its not like it will change between key-presses ... unless something is seriously wrong.

Answer 2

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");
 }