IE6 Textarea Oddity By Ryan Campbell · September 26th, 2006

So, I was casually getting my innerHTML on the other day when out of nowhere my script stops working. Apparently, you can not place HTML inside of the innerHTML of a textarea in IE6. Don’t be fooled when it lets you place normal text using innerHTML — HTML tags are a no go. Let’s take a look at the code to see what I am talking about. First, we have a textarea with a button to trigger our function:

<textarea></textarea>
<button>Break</button>

And then a simple JavaScript function to modify the innerHTML of the textarea.

function breaktext() {
    ta = document.getElementById('breakme');
    ta.innerHTML= '<a href="particletree.com">Particletree</a>';
}

Give this a run in IE6, and nothing will happen when you click the button. Every other browser will populate the textarea with the string. The solution, as you would expect, is to use value instead of innerHTML. I don’t know why I had innerHTML there in the first place, but I did. So, think of this as a quick tip in case you make the same mistake.

HTML Form Builder
Ryan Campbell

IE6 Textarea Oddity by Ryan Campbell

This entry was posted 4 years ago and was filed under Notebooks.
Comments are currently closed.
« Previous
Next »

· 11 Comments! ·

  1. ff · 4 years ago

    Everyone needs a hug.

  2. George E. Papadakis · 4 years ago

    Setting the innerText instead of innerHTML would work on IE (and Safari I am sure), not in Mozilla though.

  3. Kevin Hale · 4 years ago

    Dude, I totally knew about this when I was doing Code Manager stuff. I did the research and found it on the Mozilla and PPK web site.

    Sorry, I forgot to tell you.

  4. Silvan Hagen · 4 years ago

    Thank you for the tip. That’s a thing I didn’t knew as JS beginner.

  5. naterkane · 4 years ago

    yeah duh! what were you thinking!?!?

    i do find it a bit funny that since i believe it was MS that came up with innerHTML in the first place that they didn’t actually bother to implement it across the board. goes to show that sometimes sticking with compliant DOM stuff is the way to go.

    why were you trying to AHAH with a textarea anyway?

  6. naterkane · 4 years ago

    sorry for having forgotten to type “j/k” or somthing after the first link. i was totally teasing.

  7. naterkane · 4 years ago

    sorry for having forgotten to type “j/k” or somthing after the first line. i was totally teasing.

  8. Ryan Campbell · 4 years ago

    Just repopulating a textarea when someone needed to edit what they previously typed in. On this particular page, everything is loaded through JavaScript, so it couldn’t be done onload from the PHP side.

  9. Josh Schumacher · 4 years ago

    Curious - what happened to the post about iceberg you posted last night? Did you receive evidence that they didn’t steal wufoo?

  10. Ryan Campbell · 4 years ago

    No, they still took plenty from us. We slept on the post though, and decided to take it down.

  11. stefano · 4 years ago

    Hello, you can try with this script; it works with IE too.

    Break

    function breaktext() {
    var text=' <a href="particletree.com" rel="nofollow">Particletree</a>';
    tA = document.getElementById('breakme');
    var item =document.createElement("div");    item.innerHTML = text;
    item.data = text;
                            tA.appendChild(item);       
}

    Notes: you have happend DIV AFTER you set innerHTML; otherwise it desn’n work.