473,895 Members | 2,279 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Browser problems switching element type to textarea and setting focus

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:

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

Mar 7 '09 #1
25 5212
33 New Member
The problem with firefox is in your function a_state, you are using:

Expand|Select|Wrap|Line Numbers
  1. p.innerHTML = this.innerHTML
To get the actual value of the textarea, use value.

Expand|Select|Wrap|Line Numbers
  1. p.innerHTML = this.value;
Again, this works in Firefox. I don't have IE, and I have yet to test in Safari. Will get back to you with Safari (and maybe Camino?) if I can find out anything else
Mar 7 '09 #2
160 New Member
I need to set the focus to a dynamically added textarea. I'm currently using:
Expand|Select|Wrap|Line Numbers
  1. var textarea=document.getElementById("ta");
  2. textarea.focus();
Firefox: works fine
Safari: focuses then instantly blurs
IE: does not focus at all

I'm a beginner at JS and any example i find using focus() work fine but when i try it myself it doesn't. Any idea what i'm missing here to set focus?

example page here:
focus is set in the function "edit_state ()"

Mar 7 '09 #3
608 Contributor
Can u pls post the code what u have tried...

Ramanan Kalirajan
Mar 9 '09 #4
16,027 Recognized Expert Moderator MVP
The code is in the test page link.

bugboy, try adding a small timeout to allow the focus to take effect, e.g. 10-50 milliseconds.
Mar 10 '09 #5
160 New Member
Thanks.. I tried the setTimeout() but it didn't seem to do anything.. perhaps i was using wrong. I'm not to sure what function call to delay?

I did however find that adding a mouseover event and creating a focus() function does work. But it doesn't seem to be ideal because it has to execute the listener code whereas a timeout may be lighter weight?

Expand|Select|Wrap|Line Numbers
  1. function edit_state()
  2. {
  3. var text = this.innerHTML
  4. this.innerHTML='<textarea id="ta" rows="1" cols="40">'+text+'</textarea>';
  5. var textarea=document.getElementById("ta");
  6. addEvent(textarea,"mouseover",focus1);
  7. addEvent(textarea,"blur",a_state);
  8. }
  10. function focus1()
  11. {
  12. this.focus();
  13. }
Mar 10 '09 #6
8,658 Recognized Expert Moderator Expert
the correct function call is (should be)
Expand|Select|Wrap|Line Numbers
  1. setTimeout(textarea.focus,1000);
altough this executes the function after that delay. if I understand it right, you need the delay after the focus() was called.
Mar 10 '09 #7
160 New Member
Thanks, yes i was doing it wrong! It still doesn't seem to work.. nothing really comes after the focus except adding a listener for a blur event. I tried setting a delay on that and it didn't work.. there is nothing else to delay that i can see.

[sorry it's not in proper code tags.. the site always truncates my posts at the close code tag.. very frustrating.. perhaps someone else can close the code for me]

Expand|Select|Wrap|Line Numbers
  1. function edit_state()
  2. {
  3. var text = this.innerHTML
  4. this.innerHTML='<textarea id="ta" rows="1" cols="40">'+text+'</textarea>';
  5. var textarea=document.getElementById("ta");
  6. textarea.focus();
  7. setTimeout(blurevent,1000);
  8. }
  10. function blurevent()
  11. {
  12. var textarea=document.getElementById("ta");
  13. addEvent(textarea,"blur",a_state);
  14. }
Mar 10 '09 #8
160 New Member
Yes the truncated message thing has been happening to me for about a year, sometimes if i edit at repaste the message with proper code tags it works and sometimes it just deletes everything after the close tag again. i think someone from bytes has looked into it for me in the past with no result.
Mar 10 '09 #9
16,027 Recognized Expert Moderator MVP
Expand|Select|Wrap|Line Numbers
  1. setTimeout(setFocus,50);
  2. }
  4. function setFocus()
  5. {
  6.    var textarea=document.getElementById("ta");
  7.    textarea.focus();
  8. }
Mar 10 '09 #10

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

Similar topics

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.
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 + '>'; }
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):
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...
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
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">
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
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"...
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
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: 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...
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: 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...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
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...

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.