有意思:textarea resize属性下纯CSS交互效果

这篇文章发布于 2013年03月27日,星期三,19:08,归类于 CSS相关。 阅读 67091 次, 今日 1 次 13 条评论

 

一、众所周知的

众所周知,文本域(textarea)在FireFox或Chrome浏览器下,右下角有个可以拖拽的标志。
textarea拖拽的小标示 张鑫旭-鑫空间-鑫生活

有人保留,有人嫌碍事,直接resize:none;掉,但是,估计没人利用整个儿做交互效果。

二、纯CSS的交互展示

您可以狠狠地点击这里:textarea resize下的纯CSS交互demo

例如,拖动(往右→)下图圈中的图标:

点击操作示意

一个半透明遮罩层随着拖动把照片给覆盖了,达到了半遮面的交互效果。

拖动中示意

效果没什么,但是却完全CSS实现的,就有意思了。

三、实现原理

我们平时拖动文本域的时候,往右拖则文本域宽度往右侧扩展。但是,如果文本域右侧定位(浮动或绝对定位),则右侧不动,宽度往左侧扩展。下图演示为右100像素绝对定位:
默认位置 拉伸后

我们还知道,textarea resize的时候宽度变化会让具有“包裹性”的父元素宽度跟着一起变化,所以,如果我们把textarea放在具有半透明背景色的层中,那拉伸的时候,这个半透明层不就可以拉拉伸伸,有了交互效果啦!这就是demo中半透明层覆盖来覆盖去的原理。

说得再多也不容易明白,demo中一些障眼的属性(overflow:hidden;opacity:0;)去掉,你就知道大概了。下图为去掉overflow:hidden;以及文本域opacity设为0.6后的效果:
一些障眼的CSS属性去掉后的效果 张鑫旭-鑫空间-鑫生活

四、结束语

经测试,Opera/FireFox/Chrome浏览器支持,IE10以及下面的喽喽们都不支持。显然,兼容性是硬伤。因此,除了一些特殊情况,此实现没有多少实用价值。仅供大家娱乐,仅供大家参考。当然,您可以发挥你智慧实现其他一些交互。

唉,忧伤的三月,就这些,感谢阅读!

参考文章:Tricky Textarea Pulltab

(本篇完)

分享到:


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

  1. Frankie说道:

    可惜移动端支持度很差,即使 2022 年了。

  2. Todd_hua说道:

    重在原理的理解

  3. 阿牛说道:

    这个挺好玩

  4. 玉面小飞鱼说道:

    喵,评论回复之后不会邮件提示捏?

  5. s说道:

    用 Firefox 22 表示看不到~

    其实你可以把开始时的那个 datalist 做成一个 display:none 直到内容非空才显示
    另外那个热门电影排行的在 IE 10 and Firefox 22 下貌似显示的都是 Top 1 Top 2, etc.

    ok, Firefox 22 中这货没问题 IE 10 中这货有问题,那个热门电影的。。。

    because 你修复了 ff 的问题。。。ie 10 如果你认为这确实是问题可以用这种办法
    /*@cc_on
    // script goes here
    @*/

  6. li4hao说道:

    知微见著 学习了。。。。

  7. YaUi说道:

    也只能玩玩~!

  8. 张 鑫旭说道:

    这也可以?哈哈,想象力丰富

  9. 云儿飘飘说道:

    哈哈 的确 方向性错误 你可以把demo遮罩层放左面 也可以拖动 就没方向性的体验不好了

  10. 玉面小飞鱼说道:

    这个也是用CSS调戏textarea resize属性的一个例子,蛮好玩儿的
    http://css-tricks.com/tricky-textarea-pulltab/

  11. 牛奶无肋骨说道:

    在IE10上面不支持,而且方向问题,向右拖动蒙板向左华东,影响交互体验

  12. jixiangac说道:

    有意思 = =!