How to listen for drag and drop plain text in textarea with jQuery?

I want a user to be able to drag and drop plain text (external to the browser) into a textarea, and listen for this event.

In chrome at least, .change() does not pick u开发者_StackOverflow社区p on this, and jQueryUI .droppable() only seems to work with html elements, not plain text. Any suggestions are welcome.

This seems to work fine in IE7+, FF6, and Chrome (does not work on Safari):

$("textarea")
    .bind("dragover", false)
    .bind("dragenter", false)
    .bind("drop", function(e) {
        this.value = e.originalEvent.dataTransfer.getData("text") ||
            e.originalEvent.dataTransfer.getData("text/plain");

        $("span").append("dropped!");

    return false;
});

(Basically adapted from this related answer)

Example: http://jsfiddle.net/2cJZY/ Looks like you must cancel the dragover (and dragenter) event to catch the drop event in Chrome.

How about checking another event like onfocus?

Store the value of the textarea, onfocus of the text area, check if a change was made.