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

Posted 2023-05-07

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

【英文标题】：How to resize a flexible text-area on a mobile device?

【发布时间】：2015-08-22 09:39:31

【问题描述】：

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

<textarea>

http://jsfiddle.net/sssdpepa/

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

【问题讨论】：

我刚刚在我的 MotoG 移动设备上的 Chrome 中对其进行了测试，textarea 的调整大小功能似乎对我有用。您能否详细说明这不起作用的地方？谢谢。

什么？你如何调整它的大小？我尝试调整它的大小整整 5 分钟，我的手指到处拖动，但没有任何效果......

你想如何调整文本区域的大小？水平还是垂直？

在 Win10 Chrome 上为我工作，在撰写本文时是最新的。

【参考方案1】：

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

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

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

设置resize:none。 使用 html + CSS + img (SVG) 在右下角创建一个调整大小的小标签。 使用 JS 在调整大小选项卡上侦听拖动事件（您可能需要自定义触摸事件库）。 监听器逻辑： 如果向下拖动，则将元素的高度增加拖动距离，但不要增加超过 CSS/样式的最大高度。 如果向上拖动，则将元素的高度降低拖动距离，但不要降低到超出 CSS/样式最小高度。 同样，如果向右拖动，则增加宽度，但不要增加超过设置的最大宽度。 同样，如果向左拖动，则减小宽度，但不要减小到超出设置的最小宽度。 如果父元素的宽度/高度是固定的，请勿让用户调整大小超出父尺寸。 如果父级是自动宽度/高度，如果元素的尺寸变化碰巧超过了父级的边缘，您可能必须相应地调整滚动位置。 （您可能还需要执行一些现场测试来观察更改父元素的 scrollTop/scrollLeft 是否会破坏您的拖动检测）。

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

【讨论】：

现在已经不是这样了。现在大多数移动浏览器都支持“调整大小”。

【参考方案2】：

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

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

【讨论】：

我说的是手动调整大小，而不是响应式调整大小。我希望能够用手指将移动文本区域变大，就像我可以在计算机上使用鼠标将其变大一样。

resize: 两者都是你想要的，我很确定。请注意，IE 或 Opera 不支持它

用手指滑动和拖动仍然无法调整框的大小，即使使用 resize: both。

我想我记得听说过一些关于您与移动设备交互的方式实际上是如何阻止某些元素正常工作的。

无论如何，jQuery 或 javascript 可能有解决方案。对不起，我帮不上忙！

【参考方案3】：

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

http://jqueryui.com/resizable/

【参考方案4】：

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

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