msc-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.

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

<script 
  type="module"
  src="https://your-domain/wc-msc-stretch-textarea.js"
</script>

• Structure

Put <msc-stretch-textarea /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-stretch-textarea>
  <script type="application/json">
    {
      "name": "my-stretch-textarea",
      "value": "default content",
      "maxLength": 300,
      "placeholder": "placeholder",
      "pattern": "",
      "disabled": false,
      "readOnly": false,
      "required": true 
    }
  </script>
</msc-stretch-textarea>

Or set attributes directly.

<msc-stretch-textarea
  name="my-stretch-textarea"
  value="default content"
  maxlength="300"
  placeholder="placeholder"
  required
></msc-stretch-textarea>

Developers could also put <textarea /> inside <msc-stretch-textarea /> as its child.

<msc-stretch-textarea>
  <textarea
    name="my-stretch-textarea"
    maxlength="300"
    placeholder="placeholder"
    required
  >
    default content
  </textarea>
</msc-stretch-textarea>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-stretch-textarea />.

<msc-stretch-textarea
  remoteconfig="https://your-domain/api-path"
  ...
></msc-stretch-textarea>

JavaScript Instantiation

<msc-stretch-textarea /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { MscStretchTextarea } from 'https://your-domain/wc-msc-stretch-textarea.js';

//use DOM api
const nodeA = document.createElement('msc-stretch-textarea');
document.body.appendChild(nodeA);
nodeA.name = "my-stretch-textarea";
nodeA.maxLength = 300;

// new instance with Class
const nodeB = new MscStretchTextarea();
document.body.appendChild(nodeB);
nodeB.name = "my-stretch-textarea";
nodeB.maxLength =300;

// new instance with Class & default config
const config = {
  name: "my-stretch-textarea",
  maxLength: 300
};
const nodeC = new MscStretchTextarea(config);
document.body.appendChild(nodeC);
</script>

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.

<style>
msc-stretch-textarea {
  /* textarea basic font setting */
  --msc-stretch-textarea-font-size: 16px;
  --msc-stretch-textarea-font-weight: 400;
  --msc-stretch-textarea-color: #000;
  --msc-stretch-textarea-line-height: 1;
  --msc-stretch-textarea-letter-spacing: normal;

  /* textarea > placeholder font setting */
  --msc-stretch-textarea-placeholder-font-size: var(--msc-stretch-textarea-font-size);
  --msc-stretch-textarea-placeholder-font-weight: var(--msc-stretch-textarea-font-weight);
  --msc-stretch-textarea-placeholder-color: currentColor;
  --msc-stretch-textarea-placeholder-line-height: var(--msc-stretch-textarea-line-height);

  /* textarea others setting */
  --msc-stretch-textarea-background: transparent;
  --msc-stretch-textarea-min-block-size: 0;
  --msc-stretch-textarea-padding: 8px;
  --msc-stretch-textarea-margin: 0;
  --msc-stretch-textarea-box-sizing: border-box;
  --msc-stretch-textarea-border: 0 none;
  --msc-stretch-textarea-border-radius: 0;
  --msc-stretch-textarea-box-shadow: none;
  --msc-stretch-textarea-transition: initial;
  --msc-stretch-textarea-caret-color: var(--msc-stretch-textarea-color);
  --msc-stretch-textarea-accent-color: auto;
  --msc-stretch-textarea-selection-color: initial;
  --msc-stretch-textarea-selection-background: initial;
}
</style>

Attributes

< supports some attributes to let it become more convenience & useful.

• name

Set name for <textarea />. Default is empty string.

<msc-stretch-textarea
  name="my-stretch-textarea"
  ...
></msc-stretch-textarea>

• value

Set value for <textarea />. Default is empty string.

<msc-stretch-textarea
  value="default content"
  ...
></msc-stretch-textarea>

• maxlength

Set maxlength for <textarea />. Default is -1.

<msc-stretch-textarea
  maxlength="300"
  ...
></msc-stretch-textarea>

• placeholder

Set placeholder for <textarea />. Default is empty string.

<msc-stretch-textarea
  placeholder="placeholder"
  ...
></msc-stretch-textarea>

• pattern

Set pattern for <textarea />. Default is empty string.

<msc-stretch-textarea
  pattern="[a-z]{4,8}"
  ...
></msc-stretch-textarea>

• disabled

Set disabled for <textarea />. Default is false (not set).

<msc-stretch-textarea
  disabled
  ...
></msc-stretch-textarea>

• readonly

Set readonly for &lttextarea />. Default is false (not set).

<msc-stretch-textarea
  readonly
  ...
></msc-stretch-textarea>

• required

Set required for <textarea />. Default is false (not set).

<msc-stretch-textarea
  required
  ...
></msc-stretch-textarea>

Properties

Property Name	Type	Description
name	String	etter 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 disabled. Default is false.
required	Boolean	Getter / Setter for disabled. Default is false.

Events

Event Signature	Description
msc-stretch-textarea-input	Fired when 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.

Reference

• <msc-stretch-textarea />