Javascript / Client Side Development :: Safari Textarea and Events


	Safari Textarea and Events 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 On Apr 3, 4:30 am, "MikeK" <mike@hotmail.com> wrote: > 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. -- Rob 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> On Apr 3, 12:46 pm, "MikeK" <mike@hotmail.com> wrote: > 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/documentation/AppleApplications/Reference/... 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. - Hide quoted text - > <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; > mesg.value+=e.type+"\t\t"+e.srcElement+"\n";} -- Rob