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

Question

在计算机上，可以轻松调整textarea的大小，如下所示：

<textarea>

http://jsfiddle.net/sssdpepa/

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

Answer 1

大多数移动版浏览器都不支持CSS resize属性 - 这就是为您提供可调整大小的textareas。

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

没有简单的方法来增加移动大小调整＆＃34;。我想你仍然可以用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，除IE之外的所有浏览器都可以正常使用。为了与所有浏览器兼容，您可以在Jquery UI插件下面使用它来实现相同的目标。

  

http://jqueryui.com/resizable/

Answer 4

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

  

jQuery UI Touch Punch是一个小型黑客，可以使用jQuery UI用户界面库在网站上使用触摸事件。