html - 如何在移动设备上调整灵活文本区域的大小？

Question

在计算机上，调整文本区域的大小很容易，如下所示:

<textarea>

http://jsfiddle.net/sssdpepa/

你只需点击并拖动右下角的东西。但是在移动设备上，我似乎无法调整同一个文本区域的大小。有什么我想念的吗？或者我是否必须以某种方式单独添加移动调整大小功能？

Answer 1

大多数移动浏览器不支持 CSS resize 属性 - 这正是为您提供可调整大小的文本区域的原因。

查看哪些浏览器支持调整大小: http://caniuse.com/#search=resize

“添加移动调整大小”没有简单的方法。我想你仍然可以用一种 hacky 的方式来做，但强烈不推荐。逻辑大概是这样的:

1. 设置resize:none。
2. 使用 HTML + CSS + img (SVG) 在右下角创建一个调整大小的小标签。
3. 使用 JS 监听调整大小选项卡上的拖动事件(您可能需要自定义触摸事件库)。
4. 监听器逻辑:
   • 如果向下拖动，则按拖动-y 距离增加元素的高度，但不要增加超过 CSS/样式最大高度。
   • 如果向上拖动，则按拖动-y 距离减小元素高度，但不要减小超过 CSS/样式最小高度。
   • 同样，如果向右拖动，则增加宽度，但不要超过设置的最大宽度。
   • 同样，如果向左拖动，则减小宽度，但不要减小到超过设置的最小宽度。
   • 如果父元素的宽度/高度是固定的，不要让用户调整超出父元素的尺寸。
   • 如果父元素的宽度/高度是自动的，那么当元素的尺寸变化恰好超过父元素的边缘时，您可能必须相应地调整滚动位置。 (您可能还必须执行一些现场测试，以观察更改父元素的 scrollTop/scrollLeft 是否会搞砸您的拖动检测)。

总而言之，我认为不值得在移动设备上实现。考虑到有限的屏幕空间，不允许在移动设备上调整大小也可能很好。至于IE/Edge浏览器，等待CSS模块规范最终确定，MS可能会实现它。