Notes on Using Textarea

Why mention textarea specifically? Because the textarea node is actually very special. Because this node is special, it is interpreted differently in IE and other browsers.

I'll keep you in suspense for a while, haha! In fact, the main reason was that I helped a senior brother fix a BUG today. Specifically, it was because there was a failure when pulling data from the server and inserting it into the textarea. This situation only occurred in IE. Other browsers are all normal!

First, why is textarea special? In all form plug-ins, the value of textarea is written between two opening and closing tags, so its value can be regarded as a text node from the DOM perspective, which is unique to textarea. Because of this feature, you can still change the text of the textarea when you modify the value of its innerHTML. Although IE supports this, it does not allow one thing: dynamically inserting some html tags.

You might as well do an experiment:

When inserting a piece of HTML code through JS in IE, the innerHTML attribute is used instead of value or innerText.

I haven't tested IE9+, but IE6, 7, and 8 will all report errors.

It is probably for security reasons that JS is not allowed to dynamically insert HTML into the textarea, but careful people can find that if you type the HTML code manually, the textarea can accept it. I think this actually went through such a process: character escape. Yes, this is the only reason that can explain the success of manually entering the HTML code.

So, in my opinion, since so many browsers' textarea do not support HTML display, why do we still need to use the innerHTML attribute when performing JS operations? That is to say, no matter you use value to insert HTML code or innerHTML to insert HTML code, it will not be displayed after parsing (that's why there are rich text editors instead of textarea), so why not use value to set the value of textarea?

So I think that the value of textarea should not be set through innerHTML (of course it is even less likely to be innerText because of Firefox), but through value. This is something developers should pay attention to. Because some of the code I've seen recently always likes to use innerHTML. In fact, I think it all depends on the situation.

<<: Complete step-by-step record of MySQL 8.0.26 installation and uninstallation

>>: A great collection of web standards learning resources