Auto Resizable Textarea
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 (click the download button at the top of the page)
or scroll this page to see the demos.
<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>
Demo
When no attributes are set, the texbox will have the dimensions of browser's default textarea. Apart from the standard HTML attributes, the component has a couple of custom attributes, which could be tested on this page.
The [name], [rows], [cols] and [placeholder] attributes set.
Use the [disabled] attribute to make the content of the textbox not editable.
Use the [autoresize="off"] attribute to disable the autoresizing of the textbox
and use scrollbar instead.
Use the [readonly] attribute to make the content of the textbox readonly.
When the [spellcheck="false"] attribute is set, the spellcheck of the textbox will be turned off. By default it is on in your browser.
Default value set.
When the [autofocus] attribute is set, the textbox will be focused and ready to
type by default.
Use the [hidden] attribute to hide the textbox.
Register Xtag and jQuery On the Page
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XTextarea/lib/x-tag-components.js"></script> <script src="AcidJs.XTextarea/lib/jquery-2.1.1.min.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="AcidJs.XTextarea/classes/XTextarea.html" />
HTML Attributes
Check the extensive documentation in the distribution (click the download button at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the extensive documentation in the distribution (click the download button at the top of the page).
Usage and Code Insight
<div class="demo-grid">
<div>
<div>
<p>When no attributes are set, the texbox will have the dimensions of browser's
default textarea. Apart from the standard HTML attributes, the component has a couple of custom
attributes, which could be tested on this page.</p>
<acdisj-xtextarea></acdisj-xtextarea>
</div>
<div>
<p>The <code>[name]</code>, <code>[rows]</code>, <code>[cols]</code> and <code>[placeholder]</code> attributes set.</p>
<acdisj-xtextarea placeholder="Type your message..." id="textarea-1" name="textarea-1" rows="5" cols="40"></acdisj-xtextarea>
</div>
<div>
<p>Use the <code>[disabled]</code> attribute to make the content of the textbox not editable.</p>
<acdisj-xtextarea name="textarea-2" rows="10" cols="40" disabled></acdisj-xtextarea>
</div>
</div>
<div>
<div>
<p>Use the <code>[autoresize="off"]</code> attribute to disable the autoresizing of the textbox
and use scrollbar instead.</p>
<acdisj-xtextarea name="textarea-5" autoresize="off" rows="5" cols="40"></acdisj-xtextarea>
</div>
<div>
<p>Use the <code>[readonly]</code> attribute to make the content of the textbox readonly.</p>
<acdisj-xtextarea name="textarea-3" readonly>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
</acdisj-xtextarea>
</div>
<div>
<p>When the <code>[spellcheck="false"]</code> attribute is set, the spellcheck of the textbox will be turned off. By default it is on in your browser.</p>
<acdisj-xtextarea spellcheck="false" name="textarea-7" cols="40" rows="5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.</acdisj-xtextarea>
</div>
</div>
<div>
<div>
<p>Default value set.</p>
<acdisj-xtextarea name="textarea-6" cols="40" rows="5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.</acdisj-xtextarea>
</div>
<div>
<p>When the <code>[autofocus]</code> attribute is set, the textbox will be focused and ready to
type by default.</p>
<acdisj-xtextarea autofocus name="textarea-8" cols="40" rows="5"></acdisj-xtextarea>
</div>
<div>
<p>Use the <code>[hidden]</code> attribute to hide the textbox.</p>
<acdisj-xtextarea name="textarea-4" hidden></acdisj-xtextarea>
</div>
</div>
</div>
/*
* X-TextArea HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/wemakesitesnet
* @url developer blog http://martinivanov.net
**/
acdisj-xtextarea:empty,
acdisj-xtextarea[hidden],
acdisj-xtextarea [hidden]
{
display: none;
}
acdisj-xtextarea,
acdisj-xtextarea *
{
box-sizing: border-box;
padding: 0;
border: 0;
margin: 0;
}
acdisj-xtextarea[disabled] div[contenteditable]
{
background: #f1f1f1;
}
acdisj-xtextarea
{
display: inline-block;
vertical-align: middle;
background: #fff;
cursor: text;
}
acdisj-xtextarea > div
{
display: table;
table-layout: fixed;
border-collapse: collapse;
}
acdisj-xtextarea > div > div
{
display: table-row;
}
acdisj-xtextarea div[contenteditable]
{
display: table-cell;
vertical-align: top;
border-style: solid;
border-width: 1px;
border-color: #c0c0c0 #d9d9d9 #d9d9d9;
padding: .1em;
font: normal .8em/1.1em Arial, Helvetica Neue, Helvetica, sans-serif;
word-break: break-all;
white-space: normal;
color: #000;
transition: box-shadow .4s, border .2s;
}
acdisj-xtextarea div[contenteditable][placeholder]:empty::before
{
content: attr(placeholder);
opacity: .5;
font-style: italic;
}
acdisj-xtextarea div[contenteditable]:focus
{
border: 1px solid #4d90fe;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
outline: 0;
}
acdisj-xtextarea[autoresize="off"] div[contenteditable]
{
overflow: auto;
display: block;
}