flext_Flext：MooTools自动增长Textrea插件

flext

This post was authored by Graham McNicoll.

该帖子由Graham McNicoll撰写。

A while back David Walsh published a list of 7 MooTools Plugins You Should Use on Every Website which included 'AutoGrow' a text area expander plugin. 'AutoGrow' is very similar in results to the class I wrote for Education.com, Flext. I decided to release this code as 'AutoGrow' has a few things I don't like (mostly the flashing the scroll bars while growing, no max height, and the way it watches the textareas 3 times a second). Flext also has a few additional features:

不久前，David Walsh发布了您应该在每个网站上使用的7个MooTools插件的列表，其中包括“ AutoGrow”文本区域扩展器插件。 “ AutoGrow”的结果与我为Education.com Flext编写的课非常相似。 我决定发布此代码，因为“ AutoGrow”有一些我不喜欢的东西(主要是在增长时闪烁滚动条，没有最大高度，以及每秒观看文本区域3次的方式)。 Flext还具有一些其他功能：

• Grows text areas when needed
  在需要时增加文本区域
• Can set a max height to grow to
  可以将最大高度设置为
• Can grows parents if they have a fixed height
  身高固定可以成长父母
• Ghost text/text overlay for input context and help
  用于输入上下文和帮助的Ghost文本/文本覆盖
• Text input emulation (enter can submit form, instead of new line)
  文本输入仿真(输入可以提交表单，而不是换行)

View Demo 查看演示 Download 下载

用法 (Usage)

I wrote Flext so that our designers and other engineers can easily use these features with just a few class names. The classes used by Flext are:

我写了Flext，以便我们的设计师和其他工程师只需几个类名就可以轻松使用这些功能。 Flext使用的类是：

• flext - The class needed for the class to find this text area

  flext-类找到该文本区域所需的类

• growme - Automatically grows the text area

  growme-自动扩大文本区域

• maxheight-[num] - The max height to grow (in pixels)

  maxheight- [num] -要增长的最大高度(以像素为单位)

• growparents - Grows the parent elements if needed

  growparents-如果需要，增加父元素

• stopenter - Stops the enter key from making a newline

  stopenter-阻止回车键换行

• entersubmits - Submit the form when enter is pressed

  entersubmits-按下回车键提交表单

• replaceghosttext - Tries to use the ghosted text features (requires a few additional things)

  replaceghosttext-尝试使用幻影文本功能(需要一些其他事项)

For instance to create a basic growing textarea all you have to do is:

例如，要创建一个基本的不断增长的文本区域，您要做的就是：

	<textarea class="flext growme"></textarea>

A max height can be set by using a class name as well:

也可以通过使用类名来设置最大高度：

	<textarea class="flext growme maxheight-200"></textarea>

The above example grows to 200px then behaves like a normal textarea.

上面的示例增长到200px，然后表现得像普通的textarea。

View Demo 查看演示 Download 下载

笔记 (Notes)

There are a few things with Flext which could be improved: one is that the textareas do not shrink (it was considered unnecessary for our uses), the other is that to use the ghosted text features requires some non valid html. I can fix these problems if there is enough demand.

Flext有一些可以改进的地方：其一是textareas不会收缩(对于我们的使用而言，这是不必要的)，其二是使用重影的文本功能需要一些无效的html。 如果有足够的需求，我可以解决这些问题。

翻译自: https://davidwalsh.name/flext-textrea

flext