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.ondra genter, vs addEventListene r(textarea,drag enter,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 3 4941
On Apr 3, 4:30 am, "MikeK" <mike...@hotmai l.comwrote:
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:2 00px; width: 400px">Target</
textarea>
<textarea id="eventlog" style="height:2 00px; 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.getEle mentById("event log");
tgt = document.getEle mentById("targe t");
u_tgt = document.getEle mentById("upper target");
function displayEvent(e) {
mesg.value+=e.t ype+"\t\t"+e.sr cElement+"\n";
}
tgt.ondragenter = displayEvent;
tgt.ondragleave = displayEvent;
tgt.ondragover = displayEvent;
tgt.ondrop = displayEvent;
//document.ondrag enter = displayEvent;
//document.ondrag leave = displayEvent;
//document.ondrag over = displayEvent;
//document.ondrop = displayEvent;
//u_tgt.ondragent er = displayEvent;
//u_tgt.ondraglea ve = displayEvent;
//u_tgt.ondragove r = displayEvent;
//u_tgt.ondrop = displayEvent;
</script>
On Apr 3, 12:46 pm, "MikeK" <mike...@hotmai l.comwrote:
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/documenta...ts.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:2 00px; width: 400px">Target</
textarea>
<textarea id="eventlog" style="height:2 00px; 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.getEle mentById("event log");
tgt = document.getEle mentById("targe t");
u_tgt = document.getEle mentById("upper target");
function displayEvent(e) {
// Needed for IE
var e = e || window.event;
mesg.value+=e.t ype+"\t\t"+e.sr cElement+"\n";}
--
Rob This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Fred Brown |
last post by:
Hi,
I want to cancel a certain key in JavaScript.
To do so, I catch the event in OnKeyPress and cancel the default:
<head>
....
function f(evt)
{
var evt = (evt) ? evt : ((window.event) ? window.event : "")
...
|
by: Mark Roseman |
last post by:
The following script is intended to grow the textarea
when the user first gives it focus. This seems to work
on most browsers, but does nothing on Safari on the Mac
(the rows and columns are updated internally, but the
textarea does not expand onscreen).
Any ideas why it doesn't work, or if there are any
workarounds?
Thanks
|
by: bob |
last post by:
I hope this is the right group to ask. I need help from a safari
guru.
I seem to have problems getting safari web browser to execute perl
scripts.
The code I have is pretty standard.
My html code is
<form action="cgi-bin/webre.pl" name="form1" method="post"></form>
<textarea name="" cols="60" rows="5" id=" "></textarea>
|
by: Marcia Gulesian |
last post by:
The following code suppresses the 'enter' key, when run in I.E. 5.5 or
later (Windows) but not when run in Safari (Mac)
<body onkeypress="javascript:keysuppress(event)" >
function keysuppress(e)
{
if (e.type=="keypress" && e.keyCode=="13")
{
event.returnValue=false
|
by: Jesper Rønn-Jensen |
last post by:
I have a textarea that must be limited to 70 characters. No big deal --
at least so I thought.
* Textarea must not exceed 70 characters
* Exceeding content must be cut off
* Must work on input by keyboard (keypress, keyup events)
* Must work on pasted input from context menu
* Must work on pasted input via CTRL+V and similar
* Must work on pasted input via browsers menu>Edit>Paste
* Must work in Mozilla + IE and coded via W3C standards
| |
by: Pasquale |
last post by:
With the code below, can anyone see why the array and/or the field in
the last line are empty for Safari users? It works with Netscape 6 and
up, IE 6, Firefox, Konqueror.
Thanks,
Pasquale
//begin
|
by: cbjewelz |
last post by:
Hey all.
So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical alignments and div widths are off. It's as if firefox has a different definition of a pixel than safari. Here is the url: http://theprize.chemouni.com/testing.php. When you select the Option from the pull down, the first part of the form appears. Then when...
|
by: bugboy |
last post by:
I'm trying to find a cross browser solution for editing text in a flickr photo caption manor where the text is displayed in a <div> or <a> tag but changes to a <textarea> via JS when clicked.
There are two problems.
1. setting the focus on the new textarea
2. keeping the new text value when switching back to normal text.
Firefox: focuses fine but does not keep the new text value
Safari: focuses then instantly looses focus again, and...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
| |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |