• Read more about Faking 'onpaste' in Firefox

When trying to find a solution for cleaning Rich Text pasting into a textarea, we needed to find a way to detect pastes and trigger an event based on said action. Internet Explorer and Safari both have an onpaste event that allows you to hook javascript into a paste event, but Firefox does not allow this.

After a little Googling, I didn’t really come across much of a solution so I decided to roll my own.

  function checkForPaste(event) {     var e = event.element();     if ((e.previousValue && e.value.length > e.previousValue.length + 1) ||         (!e.previousValue && e.value.length > 1)) {        if (e.onpaste) {         e.onpaste(e)       } else if (e.readAttribute("onpaste")) {         eval(e.readAttribute("onpaste"));       }     }       e.previousValue = e.value;   }        function firefoxOnPaste() {     $$('textarea').each(function(e) {        if (e.onpaste || e.readAttribute("onpaste")) {         Event.observe(e,'input',checkForPaste);       }     });   }      if (Prototype.Browser.Gecko) {     document.observe('dom:loaded', firefoxOnPaste);   }

This snippet of code will automatically detect if an onpaste has been either added to a textarea’s attribute list (e.g. <textarea onpaste='alert("Pasted!")/>) or set programmatically. It will then automatically simulate paste detection using the oninput event and trigger the onpaste code when it believes a paste has been made.

The snippet will detect correctly for all pasting I’ve tried, including selecting a chunk and pasting a replacement. The only major caveat I’ve seen thus far is that the first input change after the page load will register as a paste if the textarea’s value has already been set. In any case, I thought it was a relatively straightforward way to solve the problem.

• Read more about Announcing 'Browserized Styles'

Browser compatibility, the web designer’s nightmare, has always seemed more difficult than it has to be. Why hasn’t there been an industry-standard, simple way to target CSS to specific browsers, allowing one to style the page properly without worrying about hacks and other difficult ways of pulling all the information together? I thought that something should be done about it, so taking Richard Livsey’s ‘browser_detect’ plugin as a starting point, I developed an automatic solution for including browser-specific stylesheets.

Browserized Styles provides a dead simple way to create browser-specific CSS code for
use in a Rails application. All you need to do is create a .css file targeted to
a browser by appending an underscore and identifier to the end.

Installation

 script/plugin install http://svn.intridea.com/svn/public/browserized_styles 

Example

Let’s say I have some complex CSS code that looks bad in some browsers, but works in
others. Let’s also say that i’ve put it into a stylesheet in stylesheets/complex.css.

My stylesheet link tag looks something like this:

 <%= stylesheet_link_tag 'complex' %>

Now all I have to do to target a browser is create a new CSS file with the browser’s
identifier appended to it with an underscore (e.g. “complex_ie6.css”). That’s it!
The same exact stylesheet link tag will automatically check the current user
agent and load a browser-specific CSS file if it exists. Ta-da! One-step browser
styles!

More information is available in the readme, but the end result is browser-targeting bliss.

The plugin is brand new and will probably see some modifications in the future. If you run into any problems or come up with a patch, feel free to submit it to the Intridea Public Trac .