473,714 Members | 4,502 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 #1
25 5184
chemlight
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
  2.  
To get the actual value of the textarea, use value.

Expand|Select|Wrap|Line Numbers
  1. p.innerHTML = this.value;
  2.  
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
bugboy
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:
http://macrophotography.com/focus.html
focus is set in the function "edit_state ()"

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


Regards
Ramanan Kalirajan
Mar 9 '09 #4
acoder
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
bugboy
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. }
  9.  
  10. function focus1()
  11. {
  12. this.focus();
  13. }
Mar 10 '09 #6
Dormilich
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
bugboy
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. }
  9.  
  10. function blurevent()
  11. {
  12. var textarea=document.getElementById("ta");
  13. addEvent(textarea,"blur",a_state);
  14. }
Mar 10 '09 #8
bugboy
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
acoder
16,027 Recognized Expert Moderator MVP
Try:
Expand|Select|Wrap|Line Numbers
  1. setTimeout(setFocus,50);
  2. }
  3.  
  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

2
2773
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
3321
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
8925
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
2116
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
12770
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
4894
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
2754
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
4308
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
8808
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8712
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
9316
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
9179
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
9023
tracyyun
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...
1
6638
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
4466
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...
2
2525
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2113
bsmnconsultancy
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.