metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Enhancement for standard HTML input control textarea. Excellent to create the element for pin enter. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Textarea - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Input</a></li> <li class="toc-entry"><a href="#_textarea_about">About</a></li> <li class="toc-entry"><a href="#_textarea_prepend">Prepend data</a></li> <li class="toc-entry"><a href="#_textarea_append">Append data</a></li> <li class="toc-entry"><a href="#_textarea_clear">Clear button</a></li> <li class="toc-entry"><a href="#_textarea_length">Chars count</a></li> <li class="toc-entry"><a href="#_textarea_options">Options</a></li> <li class="toc-entry"><a href="#_textarea_events">Events</a></li> <li class="toc-entry"><a href="#_textarea_methods">Methods</a></li> <li class="toc-entry"><a href="#_textarea_customize">Customize</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Textarea</h1> <p class="text-leader"> Create a customizable textarea with support for highly used options. </p>  <h3 id="_textarea_about">About</h3> <p> In Metro 4, you can use enhancement version of <code>textarea</code>. To define it, add attribute <code>data-role="textarea"</code> to HTML textarea element. </p> <div class="example"> <textarea data-role="textarea"></textarea> </div> <pre><code> <textarea data-role="textarea"></textarea> </code></pre> <h3 id="_textarea_prepend">Prepend data</h3> <p> You can add prepend data to textarea with attribute <code>data-prepend="..."</code>. </p> <div class="example"> <textarea data-role="textarea" data-prepend="<span class='mif-leanpub'></span>"></textarea> </div> <pre><code> <textarea data-role="textarea" data-prepend="<span class='mif-leanpub'></span>"></textarea> </code></pre> <h3 id="_textarea_append">Append data</h3> <p> You can add append data to textarea with attribute <code>data-append="..."</code>. </p> <div class="example"> <textarea data-role="textarea" data-append="<span class='mif-leanpub'></span>"></textarea> </div> <pre><code> <textarea data-role="textarea" data-append="<span class='mif-leanpub'></span>"></textarea> </code></pre> <h3 id="_textarea_clear_reveal">Clear button</h3> <p> When Metro 4 create <code>textarea</code>, him add to element special button: <code>clear-button</code>. This button shown when input focused or user move mouse over element. </p> <h6 class="mt-4" id="_textarea_clear">Clear button</h6> <p> This button clear current value and flash it to default if default value is defined. You can set default value with attribute <code>data-default-value="..."</code>. You can disable <code>clear-button</code> with attribute <code>data-clear-button="false"</code>. You can change default icon for this button. To set your icon, use attribute <code>data-clear-button-icon="..."</code>. </p> <div class="example"> <p>Textarea</p> <textarea data-role="textarea"></textarea> <p>Textarea with default value: You must enter text</p> <textarea data-role="textarea" data-default-value="You must enter text"></textarea> <p>Textares without clear button</p> <textarea data-role="textarea" data-clear-button="false"></textarea> <p>Custom clear button icon</p> <textarea data-role="textarea" data-clear-button-icon="<span class='mif-cancel'></span>"></textarea> </div> <pre><code> <p>Textarea</p> <textarea data-role="textarea"></textarea> <p>Textarea with default value: You must enter text</p> <textarea data-role="textarea" data-default-value="You must enter text"></textarea> <p>Textares without clear button</p> <textarea data-role="textarea" data-clear-button="false"></textarea> <p>Custom clear button icon</p> <textarea data-role="textarea" data-clear-button-icon="<span class='mif-cancel'></span>"></textarea> </code></pre> <h3 id="_textarea_length">Chars count</h3> <p> You can get chars count into your own element. To create link, add attribute <code>data-chars-counter="..."</code> to textarea. Value for this attribute must be a valid element selector: <code>id</code> or <code>class</code>. Also you can set output template with attribute <code>data-chars-counter-template</code>. Value for <code>template</code> must contains <code>$1</code> identifier. </p> <div class="example"> <p id="chars-counter">You enter 0 char(s)</p> <textarea data-role="textarea" data-chars-counter="#chars-counter" data-chars-counter-template="You enter $1 char(s)"></textarea> </div>  <h3 id="_textarea_options">Options</h3> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>charsCounter</code></td> <td><code>data-chars-counter</code></td> <td>null</td> <td>Element for output text length info</td> </tr> <tr> <td><code>charsCounterTemplate</code></td> <td><code>data-chars-counter-template</code></td> <td>$1</td> <td>Template for output text length info</td> </tr> <tr> <td><code>defaultValue</code></td> <td><code>data-default-value</code></td> <td></td> <td>Default value for textarea</td> </tr> <tr> <td><code>prepend</code></td> <td><code>data-prepend</code></td> <td></td> <td>Prepend data</td> </tr> <tr> <td><code>append</code></td> <td><code>data-append</code></td> <td></td> <td>Append data</td> </tr> <tr> <td><code>clearButton</code></td> <td><code>data-clear-button</code></td> <td>true</td> <td>Show/hide clear button</td> </tr> <tr> <td><code>clearButtonIcon</code></td> <td><code>data-clear-button-icon</code></td> <td><span class='default-icon-cross'></td> <td>Icon for clear button</td> </tr> <tr> <td><code>autoSize</code></td> <td><code>data-auto-size</code></td> <td>true</td> <td>Auto resize height of textarea when user enter text</td> </tr> </tbody> </table> <h3 id="_textarea_events">Events</h3> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Context</th> </tr> </thead> <tbody> <tr> <td><code>onChange(val, length)</code></td> <td><code>data-on-change</code></td> <td>textarea</td> </tr> <tr> <td><code>onTextareaCreate(el)</code></td> <td><code>data-on-textarea-create</code></td> <td>textarea</td> </tr> </tbody> </table> <h3 id="_textarea_methods">Methods</h3> <p> You can use methods to interact with input component: <code>clear()</code>, <code>toDefault()</code>, <code>disable()</code>, <code>enable()</code>, <code>length()</code>. </p> <pre><code> var textarea = $(el).data('textarea'); textarea.clear(); textarea.toDefault(); textarea.toggleState(); </code></pre> <h3 id="_textarea_customize">Customize</h3> <p> You can customize your input with special attributes: </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>clsComponent</code></td> <td><code>data-cls-component</code></td> <td>Additional classes for control.</td> </tr> <tr> <td><code>clsTextarea</code></td> <td><code>data-cls-component</code></td> <td>Additional classes for textarea.</td> </tr> <tr> <td><code>clsPrepend</code></td> <td><code>data-cls-prepend</code></td> <td>Additional classes for prepend.</td> </tr> <tr> <td><code>clsAppend</code></td> <td><code>data-cls-append</code></td> <td>Additional classes for append.</td> </tr> </tbody> </table> <div class="example"> <textarea data-role="textarea" data-default-value="Enter you text" data-cls-textarea="bg-darkCyan fg-white" data-prepend="<span class='mif-leanpub'></span>" data-cls-prepend="bg-light" data-clear-button-icon="<span class='mif-cross fg-white'></span>"></textarea> </div> <pre><code> <textarea data-role="textarea" data-default-value="Enter you text" data-cls-textarea="bg-darkCyan fg-white" data-prepend="<span class='mif-leanpub'></span>" data-cls-prepend="bg-light" data-clear-button-icon="<span class='mif-cross fg-white'></span>"></textarea> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>