《jQuery插件：自动扩展文本域.docVIP

自动扩张文本域在诸如Facebook这样的网站上非常流行，文本域的高度随用户输入文本数量的多少而缩放有很多好处： 页面不会被大面积的文本域占有； 一个在线表单有多个文本域看起来更简洁，便于用户完成表单； 用户可以在不使用滚动条的情况下查看文本。 第三部分教程将介绍如何用html和一个可重用德尔jQuery插件构建自动扩展文本域，在看第三篇之前，你需要了解它是如何工作的，以及如何在你的项目中使用这些代码。 查看demo 需求 和许多优秀的开发者一样，我们需要全面理解系统的需求。 任何页面的任何文本域在需要时都能自动扩展； 一些文本域并不需要自动扩展功能； 我们必须确定文本域的高度能无限增长，或者在一个特定额范围里变化，例如：在50px－100px之间变化； 其解决方案在任何页面能得到重用； 必须使用“渐进增强”技巧确保用户在javascript禁用的情况下仍能使用； 方案需兼容IE6＋、Firefox2+、opera、safari、chrome。 计划 我们将解决方案作为一个jQuery插件来对待，jQuery主要用来处理更多的DOM嗅探以及事件代理中常见问题，你可以用其它框架来重写代码。 但是，我们如何知道何时该调整文本域的高度，以及如何使用高度值? 首先，我么给文本域分配一个“keyup”事件处理器，这样用户在按下鼠标键和改变文本时会调用函数。 接下来，我们分析DOM的scrollHeight属性，它返回的是内部滚动区域的的高度。例如，用户输入文本的高度。如果我们设置文本域的高度 为当前滚动条的高度，滚动条就不会出现。不幸的是，scrollHeight并非W3C的标准，并且各个浏览器之间也不一致。 在FF、safari、chrome中，scrollHeight总是小于文本域的高度，即使它没有任何文本。因此，文本会扩展，删除文本也不会缩小。我们可以暂时将文本域的高度设为0，然后用真正的scrollHeight的值； 与mozilla中scrollHeight声明不同，FF中不包括padding，而safari 4和chrome2 却包括padding。如果给其顶部和底部定义2px的padding，在－webkit浏览器中scrollHeight将高出4px，这样，文本域的高度就会无限增长。去掉padding，在FF中又不一致，最简单可行的办法将扩展文本域的padding-top和padding-bottom定义为0； 在IE和opera中，scrollHeight高度更加怪异，它会正常的返回文本域内部的文本的高度。但是，设置文本域的高度为0将得到不正常scrollHeight值，虽然有浏览器嗅探技术，但我不认为这是很好的方案，我们必须保证文本域高度在IE和opera中为0。 我们也需要考虑到滚定条，默认状态下，大多数浏览器仅在需要的时候出现滚动条。但是，如果，设置overflow：auto；新起一行是滚动条就会出现，文本域高度改变时就会消失，overflow：hidden会解决滚定条闪动的问题，但是不要应用到非扩展文本域或者那些已经超出最大高度的文本域。 最后，窗口缩放也是一个问题。流动网页设计可以给文本域设置百分比宽度，那么缩放窗口就可以缩放盒子。虽然我们可以探测到窗口缩放，但在IE中方事件非常糟糕，并很快的调用事件处理器。我们可以通过代码解决该问题，但是，缩放多个文本域会导致页面跳动，从而混淆用户。因此，在文本域一旦获得焦点时，仅仅调整一次文本域的高度。 要考虑的问题很多，现在，喝杯咖啡，接下来阅读第二篇。 在第一篇我们讨论了如何构建自动扩展文本框，并总结了各种需求。在我们真正关心实际的Javascript代码之前，我们需要明白如何在网页中使用我们的代码。 自动扩展文本域如何初始化？既然我们的方案是jQuery插件，页面中每一个需要自动扩展的文本域调用以下的方法： view sourceprint? 1.$(textarea).TextAreaExpander(); 这样声明有点鲁莽，既然每一个文本域都自动扩展，也没有响应的高度限制，这样一个页面就有很多声明。 view sourceprint? 1.$(#textarea1).TextAreaExpander(); 2.$(#textarea2).TextAreaExpander(50, 200); // box will size between 50 and 200 pixels 3.$(#textarea3).TextAreaExpander(90, 300); // box will size between 90 and 300 pixels 虽然这很容易办到，服务器会针对应用状态生成不同的文本域。维护这样的代码很费劲，也容易产生开