Content editable auto sizing "textarea"

Magic

by George Butiri

HTML

<label>Your Name</label>
<div class="autoheight autosave contenteditable" contenteditable="true" placeholder="Your Name"></div>

CSS

body {
    background: #3A3E3F;
    font-family: Arial;
}
label {
    font-size: 11px;
    color: #ddd;
}
.autoheight {
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 20px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    display: block;
    resize: none;
    border: 0;
    outline: none;
    min-width: 200px;
    background: #ddd;
    max-height: 400px;
    overflow: auto;
}
.autoheight:hover {
    background: #eee;
}
.autoheight:focus {
    background: #fff;
}
.autosave {
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    position: relative;
    float: none;
}
.autoheight * {
    margin: 0;
    padding: 0;
}
.autosave.saving {
    background: #ff9;
}
.autosave.saved {
    background: #9f9;
}
.autosave.error {
    background: #f99;
}
.autosave:hover {
    background: #eee;
}
.autosave:focus {
    background: #fff;
}
[contenteditable=true]:empty:before{
    content:attr(placeholder);
    color: #999;
    position: relative;
    top: 0px;
    /*
    For IE only, do this:
    position: absolute;
    top: 10px;
    */
    cursor: text;
}

JavaScript

var _auto_value = '';
$(document).on('blur','.autosave',function(e) {
    var $this = $(this);
    if ($this.text().trim() == '') {
        $this.html('');
    }
    
    // The text is here. Do whatever you want with it.
    $this.addClass('saving');
    
    if (_auto_value !== $this.html() || $this.hasClass('error')) {
        
        // below code is for example only.
        $.ajax({
            url: '/echo/json/?action=xyz_abc',
            data: 'data=' + $this.html(),
            type: 'post',
            datatype: 'json',
            success: function (d) {
                console.log(d);
                $this.removeClass('saving error').addClass('saved');
                var k = setTimeout(function () {$this.removeClass('saved error')},500);
            },
            error: function () {
                 $this.removeClass('saving').addClass('error');
            }
        });
    } else {
        $this.removeClass('saving');
    }
}).on('focus mouseup','.autosave',function() {
    var $this = $(this);
    if ($this.text().trim() == '') {
        $this.html('');
    }
    _auto_value = $this.html();
}).on('keyup','.autosave',function(e) {
    var $this = $(this);
    if ($this.text().trim() == '') {
        $this.html('');
    }
});