UziTech

by Tony Brix

HTML

<script src="https://rawgit.com/UziTech/jquery.toTextarea.js/master/jquery.toTextarea.js"></script>
<div id="textarea">This is a textarea that resizes with the text.
    
You can also use Ctrl-B for <b>bold</b>, Ctrl-I for <i>italics</i> and Ctrl-U for <u>underline</u>.

You can also drag and drop images from your desktop.</div>
<div id="messages"></div>
<div id="buttons">
    <button id="gettext">Get Text</button>
    <button id="gethtml">Get HTML</button>
</div>
<div id="textareaNoHTML">This is a textarea that resizes with the text but does not accept images or any formatting.</div>
<br/>
<div id="textareaSingleLine">This is a resizable single line input.</div>
<br/>
<br/>
<div id="textareaPlaceholder" placeholder="A placeholder to show when the div is empty"></div>

CSS

html, body {
    width: 100%;
    padding: 0;
    margin: 0;
}

#textarea, #textareaNoHTML, #textareaPlaceholder {
    width: 96%;
    min-height: 2.3em;
    margin: 0 2%;
    box-sizing: border-box;
}

#textareaSingleLine {
    display: inline-block;
    max-width: 90%;
    min-width: 50%;
    margin: 0 2%;
    overflow: hidden;
}

#buttons {
    text-align: center;
    margin: 10px;
}

JavaScript

$(function () {
    $("#textarea").toTextarea({allowHTML: true, allowImg: true});
    $("#gettext").click(function () {
        $("#messages").text($("#textarea").text());
    });
    $("#gethtml").click(function () {
        $("#messages").text($("#textarea").html());
    });
    $("#textareaNoHTML").toTextarea({allowHTML: false, allowImg: false});
    $("#textareaSingleLine").toTextarea({singleLine: true});
    $("#textareaPlaceholder").toTextarea();
});