Notes on Using Textarea

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

Recommend

8 tips for Vue that you will learn after reading it

1. Always use :key in v-for Using the key attribu...

jQuery implements navigation bar effect with expansion animation

I designed and customized a navigation bar with a...

Docker deploys Mysql, .Net6, Sqlserver and other containers

Table of contents Install Docker on CentOS 8 1. U...

How to run sudo command without entering password in Linux

The sudo command allows a trusted user to run a p...

Example code and method of storing arrays in mysql

In many cases, arrays are often used when writing...

How does Vue3's dynamic components work?

Table of contents 1. Component Registration 1.1 G...

How to display div on object without being blocked by object animation

Today I made a menu button. When you move the mous...

Solve the problem of not finding NULL from set operation to mysql not like

An interesting discovery: There is a table with a...

43 Web Design Mistakes Web Designers Should Watch Out For

This is an article about website usability. The a...

Use HTML and CSS to create your own warm man "Dabai"

The final result is like this, isn’t it cute… PS:...

Vue template compilation details

Table of contents 1. parse 1.1 Rules for intercep...

How to quickly modify the table structure of MySQL table

Quickly modify the table structure of a MySQL tab...

Learn the operating mechanism of jsBridge in one article

Table of contents js calling method Android 1.js ...

JavaScript Objects (details)

Table of contents JavaScript Objects 1. Definitio...