473,789 Members | 2,799 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Browser problems switching element type to textarea and setting focus

bugboy
160 New Member
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 may not keep new text.
EI: does not set focus but does keep the new text value.

An example page including js can be seen here:
http://macrophotography.com/test.html

Any suggestion or help in figuring out what is happening would be greatly appreciated. I'm a beginner at JS.

Thanks!
Bugboy
Mar 7 '09
25 5201
bugboy
160 New Member
Hey that works! I have no idea why a delay before setting focus would work?... but it does. Thanks guys!

BugBoy
Mar 10 '09 #11
acoder
16,027 Recognized Expert Moderator MVP
It seems to be a timing bug in IE when setting focus to elements. Setting a small delay before setting focus usually solves the problem.
Mar 10 '09 #12
bugboy
160 New Member
I've found an additional complication.. when i add multiple elements with the same function it messes up the functions. I think it's dropping or canceling events when they overlap.

The problem occurs when you click one element while another is in focus. It works fine if you loose focus before clicking next element.

I thought it could be that the textarea id is the same for the next element to focus as the last, but i separated each element and gave each their own id and it didn't fix the problem.

http://macrophotography.com/edit.html

I think i may need something to force the functions to execute in order. I think i've seen that done but i'm not sure where or how.. Or maybe just adding a delay? any suggestions?

Thanks!
Bugboy
Mar 22 '09 #13
acoder
16,027 Recognized Expert Moderator MVP
Even if giving unique IDs doesn't fix the problem, each element should have a unique ID. Can you show the code where you tried to give each element its own ID.
Mar 24 '09 #14
bugboy
160 New Member
Thanks, i really appreciate you looking at this for me..

http://macrophotography.com/uniqueid.html

The editable textarea is created with a click event then removed with a blur event.. before another is made with the same id.. there should only ever be one textarea at a time so what i meant by the textarea's having the same id is that every time a textarea is created it's id is the same as the last.. but should still be unique because the last one should have been removed first.. i though maybe the old one wasn't removed before the new was made so i tried unique id's.. .the quickest way to test that was at the link above..
Mar 24 '09 #15
bugboy
160 New Member
it seems to only be a problem in FireFox...

Background: I want the text displayed in a div so that it can have active links but when clicked the text is opened in a textarea to be edited. It needs to be a text area so that it can have multiple lines of text.. but of course you can't display links in a text area so it switches back to a div with <a> tags on blur in order to display any links.
Mar 24 '09 #16
acoder
16,027 Recognized Expert Moderator MVP
I think a simple solution would be to make sure no element has focus. If any do, remove the focus before changing the clicked div. Use the same ID "ta1" and if it exists, change it back.
Mar 28 '09 #17
drhowarddrfine
7,435 Recognized Expert Expert
Do I understand this correctly? He's using the same 'id' for more than one element? This makes it all invalid. How can he select the proper element when there are multiple elements with the same id? Perhaps that's the problem?
Mar 28 '09 #18
bugboy
160 New Member
I'm dynamically generating a textarea element to edit text then removing the element on blur leaving the edited text in the div. I'm doing this so that i can display links and text formatting yet still edit it.

The page will have multiple places to edit text and only one will be in edit mode (the dynamically generated textarea) at a time. The generated textarea has the same id because i'm using the same function to generate it. I'm not sure how to pass unique id's to this function as it's called via a setTimeout.. see above. I want it to switch back on blur so that i don't need a "Save" button.

The solution above works in safari and IE but FireFox is not switching off the text area when a second element is clicked while the first is in edit mode. I'm only guessing that FireFox doesn't finish dropping the textarea on blur before it creates the next one thus possibly having two at the same time with the same id messing up the drop function. This is only my beginners guess.

I'm now trying to figure out how to get it to drop focus (as suggested) before initiating the next elements edit mode. perhaps switching focus to a hidden element and then to the new textarea?
Mar 29 '09 #19
drhowarddrfine
7,435 Recognized Expert Expert
I may still be following this incorrectly, or not thinking correctly, but once the DOM tree is generated, I'm not sure how much removing of elements you can do but I haven't done any js in a while and tend to forget stuff.
Mar 29 '09 #20

Sign in to post your reply or Sign up for a free account.

Similar topics

2
2782
by: J Krugman | last post by:
I need guidance on implementing the following functionality in JavaScript: User clicks on a link (or button) in browser window A that brings up a separate browser popup window B featuring a list/table of 500+ clickable items; clicking on any one of these items causes it (or rather its label string) to be added to the contents of a textarea field in the original page A, perhaps after checking that it has not been added already.
15
3327
by: lawrence | last post by:
Is this the correct way to test for a method before I use it? createRange() is, I believe, an IE only method. function wrapSelectionInTag(selection, tag) { if (document.selection.createRange) { var range = document.selection.createRange(); if (range.parentElement() == element) range.text = '<' + tag + '>' + range.text + '<\/' + tag + '>'; }
3
8928
by: Robert Oschler | last post by:
I have a textarea element that I have created an onblur() handler for. In the onblur() handler, I check to make sure that they have saved the contents of the edit box, before leaving it. If they have not saved the contents, when they exit the edit box, I put up an alert telling them to perform the save. My handler (note: the editBox variable was properly assigned a reference to the desired HTML textarea element earlier):
0
2117
by: Vinod. | last post by:
Hi all, I have added browser control to a windows form. I am loading pages having multiple frames. I have noticed that the focus in a text is not maintained when the application is deactivated. I fixed this issue by finding the active element in dom and then setting its focus. If the active element is a frameelement then I get the document of the frameelement and then get the activeelement of that document and set the focus. This works...
6
12775
by: libsfan01 | last post by:
hi all! is it possible to change an element type with javacript for example onclick to change a text box to a hidden element or to a textarea? kind regards marc
13
4901
by: anil.rita | last post by:
When the user chooses an AV file to play, based upon the type of file, I want to use the default installed media player to play it. I am wondering if this is a good way - any alternatives, suggestions or improvements? if( wmv file) document.write("<OBJECT id=Player classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 height="354" width="479">
4
3014
by: Duncan Jones | last post by:
I'm almost certain there is no easy answer to this question, but I'd thought I'd just check.... *Ignoring* for a second why I want to do this, is there any way to specify that an element in a page should ignore all CSS properties that have been defined for it, and to adopt some form of browser default? Suppose I want to add a <tdelement to an *arbitrary* web page. I want this element to ignore any CSS directives that may already apply
10
2762
by: sufian | last post by:
I am new to the world of PHP. Below is my simple PHP file "invite.php" with a form having an image send button (I have to use the image send button because it is the requirement, may be this is causing problem!): <html> <head><title>Form</title> </head> <body> <script language="javascript" src="validation.js"></script> <form action="submit.php" method="POST"> <table border ="0" align="center" cellpadding="9"...
3
4311
by: blackrunner | last post by:
ERROR in my Query?! ERROR: Element GESCHLECHT is undefined in FORM. i think everything ok. Maby somebody can help me here Element GESCHLECHT is undefined in FORM. The error occurred in \anmeldung2.cfm: line 404
0
9511
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,...
0
10408
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10199
jinu1996
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...
0
9020
agi2029
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...
1
7529
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6768
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();...
0
5417
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4092
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
2
3697
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.