HTML5, CSS3 & JS Experiments

By Martin Ivanov

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.

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.

When the [spellcheck="false"] attribute is set, the spellcheck of the textbox will be turned off. By default it is on in your browser.

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.

Default value set.

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.

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;
}