Content Editable testing

by qfox

HTML

<p>1. Try to focus and then to blur</p>
<p>2. Try to type a letter and then remove it</p>
<p>3. Try to press enter and then backspace</p>
<p>Slightly different result. Isn't it?</p>
<br/>
<p class="textarea" contentEditable="true" placeholder="I'm empty"></p>
<br/>
<p class="textarea" contentEditable="true" placeholder="I wanna be empty... ;-("> </p>
<br/>
<label>Inside the first p.textarea:</label>
<textarea class="textarea" placeholder="I'm safe"></textarea>

CSS

.textarea {
    border:1px solid #bbb;
    border-radius:2px;
    padding:2px 4px;
    box-shadow:inset 1px 2px 10px -2px #aaa;
    line-height:1.5em;
    vertical-align:middle;
    width:99%;
    outline:none;
}
.textarea:focus {
    border-color:gray;    
}
.textarea:empty::before,
.textarea>*:empty::before {
    content:attr(placeholder);
    position:absolute;
    z-index:1000;
    color:#999;
}

.textarea:focus::before,
.textarea:focus>*::before {
    content:"";
}

JavaScript

setInterval(function(){
    $('textarea').val(
        $('p.textarea:first').html() + "\n" +
        $('p.textarea:last').html()
    );
}, 200);