这篇文章发布于 2019年08月7日,星期三,01:09,归类于 JS实例。 阅读 17972 次, 今日 1 次 6 条评论
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浏览器的点点点拉伸图形。
如何使用?
- 引入JS,例如:
<script src="./resize-polyfill.js"></script>
就可以,直接引入,没有什么调用,也没有什么初始化。
resize-polyfill.js下载可以狠狠地点击这里(或右键另存为)
- 使用
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。
其他说明
- IE9及其以上浏览器支持。
- 目前只支持
<textarea>
元素,普通元素的resize拉伸没有支持,实际开发很少使用,没必要支持。如果你非要支持,可以修改resize-polyfill.js,把其中的'textarea[resize]'
选择器换一换就可以了。 - 实际开发场景千千万,我写的这个resize-polyfill.js肯定不能覆盖所有的场景,大家就中规中矩使用就好,建议
<textarea>
元素保持block块级,比较不容易出现细节问题。
四、咦,这么快就结语了
今天晚上去打篮球了,公司篮球协会的活动,每周一场球。之前2年没断过,去年因为忙碌,就没去,到现在差不多大半年有了。为什么今天又去了呢,前段时间发烧了,工作到现在,快10年没发烧,结果大半年不运动,就被小小的细菌乘虚而入了,这是免疫力低下的表现。还在这次是小小的细菌,万一什么糟糕的细胞没抑制住,那就麻烦了。
所以,为了健康,再忙也要运动,所以,这周开始,重拾每周一次的篮球运动。
你还别说,运动完了,身心舒畅,虽然到家快11点了,这工作状态很不错,注意力很集中,2个小时就把这篇文章给撸出来了,给自己点个赞。看来运动并不会占用使用,反而节约了时间。
大家也一起来运动吧!
本文为原创文章,欢迎分享,勿全文转载,如果内容你实在喜欢,可以加入收藏夹,永不过期,而且还会及时更新知识点以及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8839
(本篇完)
- 检测DOM尺寸变化JS API ResizeObserver简介 (0.627)
- 有意思:textarea resize属性下纯CSS交互效果 (0.596)
- textField - jQuery文本域操作集插件展示 (0.298)
- div模拟textarea文本域轻松实现高度自适应 (0.298)
- 基于HTML模板和JSON数据的JavaScript交互 (0.298)
- 利用重绘解决IE下JS交互产生的定位重叠等棘手bug (0.298)
- HTML textarea cols,rows属性和宽度高度关系研究 (0.298)
- 小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现 (0.298)
- 第五届CSS大会主题分享之CSS创意与视觉表现 (0.298)
- 巧用DOM API实现HTML字符的转义和反转义 (0.298)
- 代码精简 - 常见JavaScript代码缩写举例 (RANDOM - 0.031)
按文中方式引入怎么没起作用呢?
如果JS是很晚的时机加载的,有可能不会触发初始化,这个问题我有时间处理下。
Edge更新了过后 创建textarea元素不会显示resize了
简单,明了,喜欢。
彩许坤
mark,将来应该能用到;顺便手动表情包【送花】