Safari Textarea and Events

[MikeK]

Ok, I've been noodling with this for several days now and I'm starting
to go crazy. Does Apple's Safari browser support drag events on
Textarea elements? The few specs and docs I've found seem to indicate
that it does but I can't get it to work for the life of me. I've tired
everything I can think of to try get notifications for the events:

ondragenter
ondragleave
ondragover
ondrop

Not only do these events not seem to fire over the body of the
textarea, but also the textarea seems to sink the events (so setting
event handlers on document or body report no events while occurring
over the text area). Even stranger the 1px border around the textarea
*does* respond to the events, but once the mouse moves into the actual
textarea it stops. I thought perhaps it was that native OSX UI
elements don't fire events, but all "regular" mouse events seem to
work (onmousemove, onclick, etc...).

Even more frustratingly, if I absolutely position a new element above
the textarea (zIndex of new element > textarea's) to try and catch
these events, the text area *below* the element still sinks the events
(even though it's not in the bubbling or capture path for the event).
In other words, a div absolutely positioned above the textarea won't
fire dragevents anywhere it overlaps the textarea. I can't click on
the textarea below or manipulate it in any way, but dragevents still
seem to be sunk by the textarea.

I've tried using event capturing vs. bubbling as well as different
methods of applying the event handler to the text area
(textarea.ondragenter, vs addEventListener(textarea,dragenter,true/
false) all to no avail.

I'm assuming Safari's textarea just doesn't work with drag events,
unless I'm missing something really basic. Anyone gotten this to work?
Any pointers or tips. Google searches have resulted in nothing, I
can't imagine I'm the only person who's tried to get this to work as
it seems like manipulating drag events on textareas would be a common
thing to want to do.

Thanks in advance!
-Mike

 

[RobG]

Ok, I've been noodling with this for several days now and I'm starting
to go crazy. Does Apple's Safari browser support drag events on
Textarea elements? The few specs and docs I've found seem to indicate
that it does but I can't get it to work for the life of me. I've tired
everything I can think of to try get notifications for the events:

ondragenter
ondragleave
ondragover
ondrop

Post a minimal example or link.

 

[MikeK]

Hi rob,
This example should show that dragover and drop don't work under
Safari on textareas. There are three event handler sections, and you
can uncomment each section to illustrate the behaviors I talk about
above. (Only the border responding to behaviors, that absolutely
positioned elements above textareas can't fire these events, and that
the events are sunk and don't propagate to the document/body event
handler). I'm fairly certain this is a bug with Safari, I'm just
amazed there isn't more noise about it online. I added some comments
to the WebKit bugzilla tracker with these details.

<div>
Here's some text to drag around.
<a href="#">Here's a link to drag around.</a>
</div>

<textarea id="target" style="height:200px; width: 400px">Target</
textarea>
<textarea id="eventlog" style="height:200px; width: 200px"></textarea>
<div id="uppertarget" style="position:absolute; z-index:100; top:
150px; left:150px; height:150px; width:150px; color:#000;
background:#900"> An element above the textarea </div>

<script>

mesg = document.getElementById("eventlog");
tgt = document.getElementById("target");
u_tgt = document.getElementById("uppertarget");
function displayEvent(e) {
mesg.value+=e.type+"\t\t"+e.srcElement+"\n";
}
tgt.ondragenter = displayEvent;
tgt.ondragleave = displayEvent;
tgt.ondragover = displayEvent;
tgt.ondrop = displayEvent;

//document.ondragenter = displayEvent;
//document.ondragleave = displayEvent;
//document.ondragover = displayEvent;
//document.ondrop = displayEvent;

//u_tgt.ondragenter = displayEvent;
//u_tgt.ondragleave = displayEvent;
//u_tgt.ondragover = displayEvent;
//u_tgt.ondrop = displayEvent;
</script>

 

[RobG]

Hi rob,
This example should show that dragover and drop don't work under
Safari on textareas.

I can't test Safari right now, but the following link say it is
supported:

<URL:
http://developer.apple.com/document.../apple_ref/javascript/func/Events.onDragEnter
Incidentally, the ondrag methods are MS proprietary, and therefore
should not be relied upon on the web in general. Try them in Firefox
and Opera.

There are three event handler sections, and you
can uncomment each section to illustrate the behaviors I talk about
above. (Only the border responding to behaviors, that absolutely
positioned elements above textareas can't fire these events, and that
the events are sunk and don't propagate to the document/body event
handler). I'm fairly certain this is a bug with Safari, I'm just
amazed there isn't more noise about it online. I added some comments
to the WebKit bugzilla tracker with these details.

Why? Most drag stuff is implemented using cross-browser libraries
rather than depending on mimicking IE's methods. There are plenty
around, including Yahoo!, walterzorn.com, jQuery, etc.

<div>
Here's some text to drag around.
<a href="#">Here's a link to drag around.</a>
</div>

<textarea id="target" style="height:200px; width: 400px">Target</
textarea>
<textarea id="eventlog" style="height:200px; width: 200px"></textarea>
<div id="uppertarget" style="position:absolute; z-index:100; top:
150px; left:150px; height:150px; width:150px; color:#000;
background:#900"> An element above the textarea </div>

<script>

mesg = document.getElementById("eventlog");
tgt = document.getElementById("target");
u_tgt = document.getElementById("uppertarget");
function displayEvent(e) {

// Needed for IE
var e = e || window.event;