ContentEditable placeholder

Working contenteditable placeholder

HTML

<div class="holder" placeholder="in case this div is empty">
    <div contenteditable="true"></div>
</div>

CSS

div {
    width: 200px;
    min-height: 20px;
    outline: 0;
}
.holder {
    padding: 5px;
    margin: 1em;
    outline: 1px solid gray;
}
.holder:before {
    content: attr(placeholder);
    color: lightgray;
    display: block;
    position:absolute;
}
.holder:before {
    color: gray;
    display: inline-block;
}
div[contenteditable] {
    z-index: 1;
    position: relative;
    background: white;
}
div[contenteditable]:empty {
    background: transparent;
}

JavaScript

$box = document.querySelector('div[contenteditable]');
ENTER_KEY = 13;

function sendOnEnter(event) {
    if(!event.shiftKey && event.keyCode === ENTER_KEY) {
        event.preventDefault();
    	$box.innerHTML = "";
    }
}
$box.addEventListener('keypress', sendOnEnter);

/*
Copy-paste this:
    'hello
    how is your
    div???'

and press enter
*/