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

这篇文章发布于 2019年08月7日,星期三,01:09,归类于 JS实例。 阅读 16418 次, 今日 4 次 6 条评论

 

一、IE/Edge不支持CSS resize

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

CSS resize兼容性

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

看看Chrome多棒:

Chrome resize拉伸效果

看看Firefox多靓:

Firefox浏览器的resize拉伸


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

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

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

可以看到效果棒棒哒:

  • 不仅支持内联文本域(display值为inlineinline-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个小时就把这篇文章给撸出来了,给自己点个赞。看来运动并不会占用使用,反而节约了时间。

大家也一起来运动吧!

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. chenlim说道:

    按文中方式引入怎么没起作用呢?

  2. 木大木大木大说道:

    Edge更新了过后 创建textarea元素不会显示resize了

  3. aSuncat说道:

    简单,明了,喜欢。

  4. qdd说道:

    彩许坤

  5. 噢啦噢啦说道:

    mark,将来应该能用到;顺便手动表情包【送花】