I was working on another feature of JSON Table Editor when I stumbled into this mess. The feature that I was working is ability to paste HTML/Excel onto the Grid. So naturally, I need to capture paste event.

After a few trials in Chrome and IE, I noticed that the implementation of paste event is inconsistent between Chrome and IE. Intrigued, I decided to do more test. The test that I’ve done was conducted in the following browsers:

1. Google Chrome Version 24.0.1312.57 m
2. Internet Explorer Version 10.0.9200.16439
3. Firefox Version 18.0.2
4. Opera Version 12.14 Build 1738
5. Safari Version 5.1.7 (7534.57.2)

To debug the JavaScript, almost all browsers have their own debugging tools except Firefox.

1. Google Chrome has Developer Tools that can be activated with Ctrl + Shift + I
2. Internet Explorer’s Developer Tools can be activated using F12
3. Firefox requires you to install Firebug to debug JavaScript.
4. Opera’s developer tools is called DragonFly. Same as Google Chrome, it is also activated using Ctrl + Shift + I
5. Safari’s developer tools is called Web Inspector. To activate it, click menu Develop → Show Web Inspector. We can also use Ctrl + Alt + I to activate it

The ExtJS code to capture the paste event:

Ext.onReady(function () {
   //....do other stuffs
   //....
   //handle paste event
   Ext.getBody().on('paste', function (evt, target) {
      var pastedText = "";
      if (Ext.isIE) {
         pastedText = window.clipboardData.getData('Text');
      }
      else if (Ext.isGecko) {
         //Sadly we can't retrieve data in Firefox
         pastedText = "";
      }
      else if (Ext.isOpera) {
         pastedText = evt.browserEvent.clipboardData.getData('text/plain');
      }
      else if (Ext.isWebKit) {
         //WebKit based browsers. i.e: Chrome, Safari
         pastedText = evt.browserEvent.clipboardData.getData('text/plain');
      }
      if (pastedText != "")
         Ext.MessageBox.alert('success', pastedText);
   });
   //....do other stuffs
   //....
}

Result

The result is somewhat surprising considering that the top 3 browsers are Chrome, IE and Firefox respectively.

Source: StatCounter Global Stats – Browser Market Share

So as expected, Google Chrome performed the best. The event handler is executed regardless on which element the paste action was done. The clipboard data also available for usage.

Internet Explorer and Firefox are somewhat disappointing. They execute the event handler only when the paste action was done in text input (textfield, textarea). And Firefox make it even worse by making the clipboard data unavailable for usage, unlike Internet Explorer.

Safari’s result is sort of expected since it uses the same layout engine as Google Chrome. But its Web Inspector is disappointing. It always crashed whenever I set breakpoints on above code and perform paste action. This is the only reason I put Ext.MessageBox.alert() in the test code above.

The surprise came from Opera. Although it is using different layout engine (Presto), it behaves similarly to Google Chrome. Has Opera silently replaced Presto with WebKit?

With above data, I think for now I will target the copy paste feature only for Chrome, Safari and Opera. I definitely need to use different approach for Internet Explorer and Firefox. But that maybe for another blog post in the future.

Incoming Search

browser, chrome, extjs, javascript, opera, safari