Stretchy设置表单元素自适应宽度/高度

Question

Stretchy是一个设置表单元素自适应宽度/高度的JavaScript插件，不仅仅可以设置文本框，下拉菜单也可以自适应高度/宽度，可根据用户的数据自动伸缩表单元素，也可以固定宽度自动换行适应高度。

特点

• 能够处理多种表单元素：Textareas、Inputs、Select等。
• 轻量级简约的插件，压缩版本只有1.5KB。
• 能够自动伸缩宽度和高度，或者固定宽度自适应高度。
• 完全独立，不依赖于任何第三方库。
• 和现有的HTML/CSS兼容性好，例如占位符、宽度、高度等。
• 不需要编写JS代码，完全通过HTML属性值操作。
• 兼容性好，能完美的兼容Chrome、FF 3.6以上、IE9以上、Opera、Safari 和 Android等多个浏览器。

---

使用方法

只需要在页面中引入 stretchy.min.js 文件。

<script src="stretchy.min.js" async></script>

默认情况下，他会应用到<textarea>、<select> 和 <input> 元素，而 <input> 元素的这些属性 text、tel、email、url 可被自动应用。

对于多行文本框，会自动自适应高度，而宽度就是你初始设置的值，Stretchy不会去更改。

JavaScript API

Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so you do not need to call any API methods for adding new elements via scripting (e.g. AJAX).

If needed, these are Stretchy’s API methods:

Stretchy.resize(element)

Autosize one element based on its content. Note that this does not set up any event listeners, it just calculates and sets the right dimension (width or height, depending on the type of control) once.

Stretchy.resizeAll(elements)

Apply Stretchy.resize() to a collection of elements, or all Stretchy is set to apply to, if no argument is provided.

Stretchy.resizes()

Can Stretchy be used on this particular element? (checks if element is in the DOM, if it's of the right type and if it matches the selector filter provided by data-stretchy-selector, if the attribute is set.

Stretchy.active

Boolean. Set to false to temporarily disable Stretchy.

注意事项

• 在浏览器窗口尺寸发生变化的时候，你可以调用 Stretchy.resize() 自适应新的元素。
• IE因为 scrollWidth 属性的原因，不兼容 <input> 的自适应，如果这对你很重要，你可以试试 scrollWidthPolyfill 。

相关链接

• 项目地址：http://leaverou.github.io/stretchy/
• Github地址：https://github.com/LeaVerou/stretchy