Wrote a textarea resize stretch polyfill for IE/Edge

1. IE/Edge does not support CSS resize

IE/Edge did not support CSS resize until it defected to the Chrome kernel. The compatibility is as shown below:

It's not a mobile terminal. It's understandable if it doesn't support it. But your IE/Edge is only available on the PC terminal. Well, it doesn't support it. I can only do it, so interesting!

Check out how great Chrome is:

See how beautiful Firefox is:

---

No way, who told me that I can’t get used to good things that can’t be shared. In order to let IE/Edge browsers also enjoy the quick feeling of CSS resize whole body stretching, I wrote a polyfill. The effect is not bad.

2. What is the effect? Please watch the video first

The following video was recorded from IE9 browser, if the video does not automatically play, please click to play.

 

You can see the effect is great:

• Not only supports inline text fields ( displayvalue is inlineOR inline-block), but also block-level status ( displayvalue is block).
• Not only does the stretched element in the lower right corner automatically follow the display status change of the text field, but the dynamically inserted <textarea>element also has its own resize effect, which does not require additional initialization.

If you have IE browser at hand, you can also feel it yourself, you can click here: IE/Edge CSS resize polyfill demo

3. Instructions for use

About UI

Use the Firefox browser to stretch the graphics little by little.

how to use?

1. Introduce JS, for example:

   <script src="./resize-polyfill.js"></script>

   It can be imported directly, there is no call or initialization.

   Resize-polyfill.js can be downloaded by clicking here (or right-click and save as)

2. Use the resizeattribute to specify the stretch type, the values ​​are both, horizontal and vertical, and the semantics are the same as the CSS resize attribute. E.g:

   Stretch in two directions: 
   <textarea resize="both"></textarea> 
   
   Stretch in the horizontal direction: 
   <textarea resize="horizontal"></textarea> 
   
   Stretch in the vertical direction: 
   <textarea resize="vertical"></ textarea>

   In order to keep the Chrome and Firefox browsers consistent, we also need the following CSS:

   textarea {
       vertical-align: top;
       box-sizing: border-box;
       resize: none;
       overflow: auto;
   }
   textarea[resize] {
       resize: both;    
   }
   textarea[resize="vertical"] {
       resize: vertical;    
   }
   textarea[resize="horizontal"] {
       resize: both;
   }

This is the end, a little CSS, and then the introduction of JS files, everything is over, is it very convenient to use, there is no API to learn, this is a really good polyfill.

other instructions

1. IE9 and above browser support.
2. Currently, only <textarea>elements are supported . The resize and stretching of common elements is not supported. It is rarely used in actual development and is not necessary. If you have to support it, you can modify resize-polyfill.js and change the 'textarea[resize]'selector in it.
3. There are tens of millions of actual development scenarios. The resize-polyfill.js I wrote definitely cannot cover all the scenarios. You can use it properly. It is recommended that the <textarea>elements remain at the block level, which is less prone to detailed problems.

Four, hey, it's ending so soon

I went to play basketball tonight. The company’s basketball association has one game a week. I haven't stopped in the previous two years. I didn't go there last year because of my busy schedule. I have been there for almost half a year now. Why did I go again today? I had a fever some time ago. I haven't had a fever for almost 10 years after working. As a result, I didn't exercise for half a year and was taken advantage of by small bacteria. This is a manifestation of low immunity. This time it is a small bacteria, if any bad cells are not suppressed, it will be troublesome.

Therefore, in order to be healthy, no matter how busy you are, you must exercise. Therefore, starting this week, resume basketball once a week.

Not to mention, after the exercise, I feel comfortable physically and mentally. Although I get home almost 11 o'clock, the working condition is very good and the concentration is very concentrated. I picked up this article in 2 hours and gave myself a like. It seems that exercise does not take up the use, but saves time.

Let's exercise together!