javascript - 可调整大小的 Textarea Like on SO 使用 Vanilla Javascript

Question

我基本上是想在 SO 上复制文本区域的可拖动调整大小功能。

我知道 SO 使用 jQuery 插件 TextAreaResizer 来完成此操作，但我想直接使用 vanilla javascript 以便了解它的实际工作原理。

Answer 1

好吧，以下是您需要执行的基本步骤:

1. 从 DOM 中移除目标 textarea

2. 创建一个div

3. 将移除的 textarea 放入新创建的 div 中并设置样式，使其始终占用 div 的所有可用区域/p>

4. 为拖动 handle 添加一个元素并为其设置样式(可能也是一个 div)

5. 将 onmousedown 和 onmousemove 事件处理程序附加到拖动 handle 元素并将包装器 div 重新插入 DOM

6. 在mousedown事件中，记录鼠标坐标

7. 在 mousemove 事件中获取当前鼠标坐标并计算与先前内存的坐标的增量

8. 将包装器 div 大小设置为其当前大小加上您计算的增量(当增量为负时，大小会减小)

这是您需要采取的基本步骤，但您还需要解决一些细节问题。