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.