November 11th, 2008
Textarea with Javascript Bug in Firefox 2.x and Up
I just noticed this, that when you want to add some text to a textarea element with Javascript you can’t do it under Firefox simply by adding to the textarea’s innerHTML.
This would be the normal thing to do, because textarea is not an input tag, where you usually add text to it using the value attribute.
What’s interesting is that when you add text to a textarea using innerHTML the code actually works, under Firebug I can see the text added between the <textarea></textarea> tags, but it won’t refresh it on the actual page.
Strangely it works if you’re using the value attribute of the textarea, but that’s just wrong. What is even more interesting that this approach works the same in IE 6 and IE 7.
In IE7 the innerHTML method works correctly.
I couldn’t find any documentation or post on this issue… is it that maybe that I’m missing something?
If you enjoyed this article then help spread the word and please follow us on Twitter or subscribe to our RSS feed.
Subscribe to our RSS feedFollow us on Twitter
on Tuesday 11, 2008
what do u mean, by “it won’t refresh it on the actual page” ?
I do this
document.getElementById(‘message’).innerHTML = “aaaaaaa”
assuming the id of the textarea is “message” and is working, in FF3, with firebug 1.2.1 on Os X
on Tuesday 11, 2008
Hmmm. Interesting, I tested this on several machines both Windows and Mac OS X.
The doctype was XHTML 1.0 Transitional
on Tuesday 11, 2008
Perhaps just part of the reason FF3 was released and FF2 is now considered old and obsolete?
on Tuesday 11, 2008
The problem persist in FF3 too.
Last week I struggled 2 hours to find the problem. I thought that my script was buggy, but it worked fine in IE6, IE7.
on Tuesday 11, 2008
I never saw this. Give us an “working” example, how you manage to get this
on Tuesday 11, 2008
I’ll have it in a couple of days. Please check back.
on Tuesday 11, 2008
I haven’t tried the ‘value’ solution, but I’ll offer more detail on innerHTML in ff. Initially, on page load, I can set the value in of a textarea using innerHTML (starting with an empty tag). I can repeatedly set it without problem, until I type something into that text area, at which point, the value will not change. If I put in an alert, I’ll see what the value should be, but it will not be refreshed on the screen.
on Tuesday 11, 2008
See:
http://blog.coderlab.us/2005/09/22/using-the-innertext-property-with-firefox/
for a more satisfactory solution.
on Tuesday 11, 2008
Interesting post. But if you pass text with innerHTML it should work, but it isn’t working in FF.
on Tuesday 11, 2008
I will have the examples soon.
on Tuesday 11, 2008
Where have you got the impression that using value on a textarea is wrong?
Textarea is after all one of the input fields together with select and input, and they all have a value property. For input the value is specified in an attribute, for select it is in an option tag, and for textarea it is in the content of the tag.
The value is specified in the HTML-markup in different ways, but in javascript it is accessed via a property that has the same name regardless of how it was defined in the HTML-markup. The strange behavior you see with innerHTML on textarea is because of the autocomplete function: Load a page with input, select and textarea elements where each of them have a value.
Enter text in the input and textarea and choose something from the select box, then refresh the page with F5. Now it doesn’t matter what the server says the value of the fields should be, because the autocomplete feature in the browser has filled in the values you had before you pressed F5.
on Tuesday 11, 2008
@Some It shouldn’t work, because according to the xHTML specs. the textarea tag shouldn’t have a value attribute.
on Tuesday 11, 2008
@Gyorgy Fekete: Are you referring to the DTD? Thats for the markup
in the document. But for javascript (ECMAScript) to access the
document you should look in the "http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html">
DOM and there you find for textarea: “value of type DOMString:
Represents the current contents of the corresponding form control,
in an interactive user agent.”
on Tuesday 11, 2008
I am shocked I actually found this blog since I was having the same exact error in FF 3.0.4. To replicate it, all you need to do is create an ajax object and set innerHTML on a textarea. Then click on anything other than the object that fires the ajax call.
Afterwards, click back on the object which fires an ajax event. At one point I thought I was crazy so I alerted out both the value and the innerHTML of the textarea, and low and behold they were different. So for some reason, FF updates the innerHTML but fails to update the value of the textarea, which is the component it uses to render the text back out to the screen. As a work around, I set both the innerHTML and value fields of the textarea, which resolved my problem. Thanks for this blog posting, it would have driven me crazy!
on Tuesday 11, 2008
FF 3 has a bug, because in XHTML compliant mode the textarea shouldn’t have a value attribute…
on Tuesday 11, 2008
Gyorgy Fekete: What do you base it on that it in javascript
shouldn’t have that attribute. Give a link to the standard.
on Tuesday 11, 2008
@some Here it is the XHTML Transitional textarea tag
There’s no value attribute.
on Tuesday 11, 2008
Gyorgy Fekete: You are referring to the specification for (X)HTML markup, and whats allowed is specified in a also known as DTD.
But that has very little to do with javascript. In javascript each element is defined as an javascript object, and that object usually have the same attributes as defined in the DTD but not always with the same name. And, most importantly: they have lots of more attributes and methods thats not defined in the DTD because it has nothing to do with the DTD. For example, the class attribute is named className in javascript.
A select element has a selectedIndex and that is not part of the DTD. Every standard property of an object is specified in the (DOM). It is in this standard that you have the specification for document.getElementByID for example, and everything else that has to do with how you access the document in javascript. Take a look at this and go down to Interface HTMLTextAreaElement. There you find: “attribute DOMString value;” and for its description: “Represents the current contents of the corresponding form control, in an interactive user agent. Changing this attribute changes the contents of the form control, but does not change the contents of the element.”
on Tuesday 11, 2008
How nice that it have inserted br tags and breaking the links…
on Tuesday 11, 2008
wordpress 2.7 is f** my theme’s markup…
on Tuesday 11, 2008
Hello again, Just stumbled on this when I was searching for another
ting. about innerHTML: “As there is no public specification for this property, implementations differ widely. For example, when text is entered into a text input, IE will change the value attribute of the input’s innerHTML property but Gecko browsers do not.”
about innerHTML: “There is no public standard that applies to this property.”
on Tuesday 11, 2008
I’ve recently come across this bug, and it exists in Firefox versions up to 3.5.1 at least. I don’t believe it will be addressed. It’s probably best to stick to value like other form elements. Editing the innerHTML is a bit tasteless.