可调整大小的Textarea喜欢使用Vanilla Javascript

Question

我基本上希望在SO上复制textareas的可拖动调整大小功能。

我知道SO使用jQuery插件TextAreaResizer来实现这一目标，但我想使用直接的vanilla javascript，以便我可以了解它是如何工作的。

Answer 1

嗯，以下是您需要采取的基本步骤：

1. 从DOM中删除目标textarea

2. 创建div

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

4. 为拖动手柄添加元素并为其设置样式（可能还是div）

5. 将onmousedown和onmousemove事件处理程序附加到拖动句柄元素，然后将包装器div重新包含到DOM中

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

7. 在mousemove事件中获取当前鼠标坐标并使用先前记忆的坐标计算增量

8. 将包装器div大小设置为其当前大小PLUS您计算的增量（当增量为负时，大小将减小）

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

Answer 2

那么，为什么不抓住插件并查看其源代码：
http://plugins.jquery.com/project/TextAreaResizer

我知道你提到你想要使用“vanilla”JavaScript，但是如果你想学习语言本身，你不会使用jQuery丢失任何东西。 jQuery为JS提供了一个抽象，这是一个真正的PITA，可以跨浏览器工作，主要是因为inconsistencies in the DOM implementation。

如果你足够勇敢，你可以使用只是 JS - 但这需要更多的工作才能增加学习上的好处。当你头疼时，不要告诉我没有警告你。

Answer 3

想要学习如何在没有第三方图书馆手持的情况下工作是很好的，但这并不意味着你无法从中吸取教训。 jQuery只是一个直接的vanilla Javascript库 - 没有混合其他语言。

似乎有这种普遍存在的概念，即某种方式“jQuery Javascript”和“vanilla Javascript”，但在大多数情况下，jQuery只是一个预编写代码库，可以为您处理许多更烦人的部分。你可以通过查看jQuery如何做和自己编写等效代码来弄清楚如何在不依赖jQuery的情况下完成它。一般技术大致相同。

您在自定义代码中通常存在的最大差异是您可能不希望重新创建整个选择器引擎（这使您可以编写$("div.foo")之类的内容来查找类foo的div）。相反，您应该替换更适合您特定情况的元素选择和创建逻辑。