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

Question

在电脑上，调整textarea的大小很容易，就像这个例子：

<textarea>

http://jsfiddle.net/sssdpepa/

在计算机上，您只需点击并拖动右下角的东西即可调整大小。但是在移动设备上，我似乎无法调整相同的文本区域的大小。有什么我遗漏的吗？还是我需要单独添加移动设备的调整大小功能？

- Jeff Caros

---

我刚在我的MotoG手机上用Chrome测试了一下，文本区域的调整大小功能似乎对我有效。你能否提供更多关于它无法正常工作的具体信息？谢谢。 - karanmhatre

什么？你怎么调整大小？我试着调整大小整整5分钟，用手指拖来拖去，但是什么都没用... - Jeff Caros

你想如何调整文本区域大小？水平方向还是垂直方向？ - Mitul

在我这里运行良好，使用的是最新版本的Win10 Chrome浏览器。 - Lee Goddard

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模块规范定稿后，微软可能会实现它。

- light

---

这种情况已经不存在了。现在大多数移动浏览器都支持“调整大小”。 - Delian Krustev

Answer 2

您可以使用 resize 属性来调整文本区域的大小，这在除了IE之外的所有浏览器中都有效。为了使其兼容所有浏览器，您可以使用下面的Jquery UI插件来实现。

http://jqueryui.com/resizable/

- Srinivas

Answer 3

我认为它无法再变小了，在CSS中修改行/列并不会改变它的外观。但你可以将其放大（使用上述属性），并设置它随屏幕尺寸而变化。参见：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

- ActionON

---

我说的是手动调整大小，而不是响应式调整大小。我想能够使用手指使移动端文本区域变大，就像我可以在电脑上使用鼠标使其变大一样。 - Jeff Caros

调整大小：我相信你想要的是both。只需注意它不支持IE或Opera。 - ActionON

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

我记得听说过，与移动设备的交互方式实际上会导致某些元素无法正常工作。 - ActionON

无论如何，可能有一个用jQuery或JavaScript的解决方案。很抱歉我没能帮上忙！ - ActionON

Answer 4

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

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

- Yann Simon

Answer 5

调整器的显示根据滚动条的宽度而定。因此，请将滚动条变宽。

.在此输入图像描述

• 示例：在ReactJS中，我有一个带有滚动条的JSX和CSS宽度
• 这样，您可以在移动屏幕上使调整器看起来更大

.textarea::-webkit-resizer {
  background-image: url('../../public/images/ResizeIndicator.svg');
}

textarea::-webkit-scrollbar {
  overflow: hidden;
}

.textarea::-webkit-scrollbar {
  width: 14px;
  display: hidden;
}

.textarea {
  resize:vertical;
  overflow-y: scroll;
}

<div className="relative textarea min-h-[75px] border border-[#D0D4D9] rounded">
  <textarea className="resize-none outline-none w-full h-full text-base font-normal       leading-[23px] bg-white p-3 "
  placeholder="Share with us your experience"
  name="feedback"
  onChange={formik.handleChange}
  maxLength={500}
  />
</div>

- Phạm Chí Linh