Safari Textarea and Events

Discussion in 'Javascript' started by MikeK, Apr 2, 2007.

  1. MikeK

    MikeK Guest

    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
     
    MikeK, Apr 2, 2007
    #1
    1. Advertising

  2. MikeK

    RobG Guest

    On Apr 3, 4:30 am, "MikeK" <> 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
     
    RobG, Apr 2, 2007
    #2
    1. Advertising

  3. MikeK

    MikeK Guest

    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>
     
    MikeK, Apr 3, 2007
    #3
  4. MikeK

    RobG Guest

    On Apr 3, 12:46 pm, "MikeK" <> 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/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;


    > mesg.value+=e.type+"\t\t"+e.srcElement+"\n";}



    --
    Rob
     
    RobG, Apr 3, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. cpprogrammer
    Replies:
    0
    Views:
    571
    cpprogrammer
    May 11, 2006
  2. cpprogrammer
    Replies:
    4
    Views:
    821
    cpprogrammer
    May 15, 2006
  3. Chris

    Events Events Events Please Help

    Chris, Aug 30, 2005, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    428
    Chris
    Aug 30, 2005
  4. Mark Roseman

    resize textarea on Safari

    Mark Roseman, Oct 10, 2003, in forum: Javascript
    Replies:
    0
    Views:
    94
    Mark Roseman
    Oct 10, 2003
  5. simonbc

    Scrolling textarea with JS in Safari

    simonbc, May 7, 2007, in forum: Javascript
    Replies:
    0
    Views:
    193
    simonbc
    May 7, 2007
Loading...

Share This Page