Stretch Textarea
Users used to experience autogrowing <textarea />
since Facebook announced this fancy effect.
There are so many skills to apply this effect in web page. Here comes the most cleanest trick for autogrowing textareas.
With this trick, decvelopers could apply CSS > Grid to make <textarea />
autogrowing with fewest event listeners. Very smart & bravo !!
<msc-stretch-textarea />
is a web component which wrap this trick to let developers could easy adopt this effect in web page instead of annoying HTML code & CSS setting.
All we need to do is just make a few setting and everything will be all set.
Try the following <msc-stretch-textarea />
and type something there. You'll see the stretch effect.
Basic Usage
<msc-stretch-textarea />
is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-stretch-textarea />
's html structure and everything will be all set.
Required Script
Structure
Put <msc-stretch-textarea />
into HTML document. It will have different functions and looks with attribute mutation.
Or set attributes directly.
Developers could also put <textarea />
inside <msc-stretch-textarea />
as its child.
Otherwise, developers could also choose remoteconfig
to fetch config for <msc-stretch-textarea />
.
JavaScript Instantiation
<msc-stretch-textarea />
could also use JavaScript to create DOM element. Here comes some examples.
Style Customization
<msc-stretch-textarea />
uses CSS variables to hook uploader trigger theme & drop zone. That means developer could easy change it into the looks you like.
Attributes
<msc-stretch-textarea />
supports some attributes to let it become more convenience & useful.
name
Set name for <textarea />
. Default is empty string.
value
Set value for <textarea />
. Default is empty string.
maxlength
Set maxlength for <textarea />
. Default is -1.
placeholder
Set placeholder for <textarea />
. Default is empty string.
pattern
Set pattern for <textarea />
. Default is empty string.
disabled
Set disabled for <textarea />
. Default is false (not set).
readonly
Set readonly for <textarea />
. Default is false (not set).
required
Set required for <textarea />
. Default is false (not set).
Properties
Property Name | Type | Description |
---|---|---|
name
|
String | Getter / Setter for name. Default is empty string. |
value
|
String | Getter / Setter for value. Default is empty string. |
maxLength
|
Number | Getter / Setter for maxLength. Default is -1. |
placeholder
|
String | Getter / Setter for placeholder. Default is empty string. |
pattern
|
String | Getter / Setter for pattern. Default is empty string. |
disabled
|
Boolean | Getter / Setter for disabled. Default is false. |
readOnly
|
Boolean | Getter / Setter for readOnly. Default is false. |
required
|
Boolean | Getter / Setter for required. Default is false. |
Events
Event Signature | Description |
---|---|
msc-stretch-textarea-input
|
Fired when <msc-stretch-textarea /> inputed. |
msc-stretch-textarea-invalid
|
Fired when <msc-stretch-textarea /> invalid. Developers could get original click event from event.detail.baseEvent to do preventDefault behavior. |