Auto Resizing Textarea HTML5 WebComponent

Just finished my next experiment with HTML5 WebComponents. AcidJs.XTextarea is an advanced replacement of the classic <textarea /> HTML element, supporting custom events and auto resizing as-you-type. Check the extensive documentation in the distribution file (click the download button at the top of the demo page) or scroll this page to see the demos.

Usage

[sourcecode language=”xml”]<acdisj-xtextarea></acdisj-xtextarea>
<acdisj-xtextarea placeholder="Type your message…" id="textarea-1" name="textarea-1" rows="5" cols="40"></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-2" rows="10" cols="30" disabled></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-5" autoresize="off" rows="5" cols="30"></acdisj-xtextarea>
<acdisj-xtextarea autofocus name="textarea-8" cols="60" rows="5"></acdisj-xtextarea>
<acdisj-xtextarea name="textarea-4" hidden></acdisj-xtextarea>[/sourcecode]

HTML Attributes of the Component

Apart from the form attributes like name, rows, cols, placeholder, spellcheck, autofocus, disabled and readonly etc. and the HTML standard attributes such is id and styleAcidJs.XTextarea supports one custom property, allowing to turn the autoresizing off:

• [autoresize="off"]

JavaScript API – Methods, Accessors and Events

The component supports all standard JavaScript methods querySelector, querySelectorAll, getElementById, etc. plus the following custom methods, accessors and events:

Methods

• enable() – the method enables back a previously disabled textbox by using the disable() method, the enabled accessor or the disabled and readonly properties.
• disable() – the method disables the queried textbox, so no user input is possible.
• getValue() – the method returns the current value of the queried textbox, similar to the enabled accessor.
• setValue(String|null) – the method sets new value to the queried textbox.

Accessors

• enabled – gets or sets the enabled state of the textbox. Use Boolean value for the setter.
• value – gets or sets value of the textbox. The setter requires a string or empty value.

Events

• type – the event is triggered upon user input and returns an object, containing the current value of the textbox to which the event handler is bound to:

  [sourcecode language=”javascript”]{
  data: "Lorem ipsum dolor sit amet…"
  }[/sourcecode]

  [sourcecode language=”javascript”]
  /*
  * Bind to the "type" event of the textbox
  **/
  $("#my-textarea").on("type", function(e, data) {
  window.console.log("textbox event:", e.type, data);
  });[/sourcecode]

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.