给IE/Edge写了个textarea resize拉伸的polyfill

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8839
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、IE/Edge不支持CSS resize

IE/Edge直到叛变到Chrome内核之前，都没有支持CSS resize拉伸，兼容性如下图：

又不是移动端，不支持还可以理解，但是你IE/Edge就只有PC端才有人用好吧，居然不支持，我只能呵呵了，so interesting!

看看Chrome多棒：

看看Firefox多靓：

没办法，谁叫我看不惯好东西不能共享呢，为了让IE/Edge浏览器也能享受CSS resize全身拉伸的quick感，于是写了个polyfill，效果还不错哟。

二、效果如何？请先看视频

下面的视频录制自IE9浏览器，如果视频没有自动播放，请点击播放。

可以看到效果棒棒哒：

• 不仅支持内联文本域（display值为inline或inline-block），也支持块级状态（display值是block）。
• 不仅右下角拉伸的元素自动跟随文本域的display状态变化，且动态插入的<textarea>元素也自带resize效果，完全不需要额外的初始化。

如果你手头有IE浏览器也可以亲自感受下，您可以狠狠地点击这里：IE/Edge CSS resize polyfill demo

三、使用说明文档

关于UI

使用了Firefox浏览器的点点点拉伸图形。

如何使用？

1. 引入JS，例如：

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

   就可以，直接引入，没有什么调用，也没有什么初始化。

   resize-polyfill.js下载可以狠狠地点击这里（或右键另存为）

2. 使用resize属性指定拉伸类型，值为both, horizontal和vertical，语义和CSS resize属性一致。例如：

   两个方向拉伸：
   <textarea resize="both"></textarea>
   
   水平方向拉伸：
   <textarea resize="horizontal"></textarea>
   
   垂直方向拉伸：
   <textarea resize="vertical"></textarea>

   为了让Chrome和Firefox浏览器保持一致，我们还需要如下所示的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;
   }

就这样结束了，一点CSS，然后引入JS文件，一切都结束了，是不是使用非常方便，没有任何API需要学习，这才是真正上佳的polyfill。

其他说明

1. IE9及其以上浏览器支持。
2. 目前只支持<textarea>元素，普通元素的resize拉伸没有支持，实际开发很少使用，没必要支持。如果你非要支持，可以修改resize-polyfill.js，把其中的'textarea[resize]'选择器换一换就可以了。
3. 实际开发场景千千万，我写的这个resize-polyfill.js肯定不能覆盖所有的场景，大家就中规中矩使用就好，建议<textarea>元素保持block块级，比较不容易出现细节问题。

四、咦，这么快就结语了

今天晚上去打篮球了，公司篮球协会的活动，每周一场球。之前2年没断过，去年因为忙碌，就没去，到现在差不多大半年有了。为什么今天又去了呢，前段时间发烧了，工作到现在，快10年没发烧，结果大半年不运动，就被小小的细菌乘虚而入了，这是免疫力低下的表现。还在这次是小小的细菌，万一什么糟糕的细胞没抑制住，那就麻烦了。

所以，为了健康，再忙也要运动，所以，这周开始，重拾每周一次的篮球运动。

你还别说，运动完了，身心舒畅，虽然到家快11点了，这工作状态很不错，注意力很集中，2个小时就把这篇文章给撸出来了，给自己点个赞。看来运动并不会占用使用，反而节约了时间。

大家也一起来运动吧！

（本篇完） 是不是学到了很多？可以分享到微信！
有话要说？点击这里。