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 />