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

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. 监听器逻辑：
   • 如果向下拖动，则将元素的高度增加拖动距离，但不要增加超过 CSS/样式的最大高度。
   • 如果向上拖动，则将元素的高度降低拖动距离，但不要降低到超出 CSS/样式最小高度。
   • 同样，如果向右拖动，则增加宽度，但不要增加超过设置的最大宽度。
   • 同样，如果向左拖动，则减小宽度，但不要减小到超出设置的最小宽度。
   • 如果父元素的宽度/高度是固定的，请勿让用户调整大小超出父尺寸。
   • 如果父级是自动宽度/高度，如果元素的尺寸变化碰巧超过了父级的边缘，您可能必须相应地调整滚动位置。 （您可能还需要执行一些现场测试来观察更改父元素的 scrollTop/scrollLeft 是否会破坏您的拖动检测）。

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

Answer 2

我不认为它可以变得更小，在 CSS 中修改行/列不会改变它的外观。您可以将其放大（使用上述属性），并将其设置为取决于屏幕尺寸。见：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

您可以为 textarea 使用 resize 属性，该属性在除 IE 之外的所有浏览器中都可以正常工作。为了与所有浏览器兼容，您可以使用下面的 Jquery UI 插件来实现相同的功能。

http://jqueryui.com/resizable/

Answer 4

您可以使用 jQuery UI Touch Punch 库 (http://touchpunch.furf.com)

jQuery UI Touch Punch 是一个小 hack，它允许在使用 jQuery UI 用户界面库的网站上使用触摸事件。