I have a contentEditable element,and I add a placeholder for it by javascript, but it has 200ms delay,here is the code

javascript:

```
function handlePlaceholder () {
    var $input = $('.input');
    var $placeholder = $('.placeholder');
    if ($input.html()) {
        $placeholder.hide();
    } else {
        $placeholder.show();
    }
}

$('.input').on('focus blur keyup', function() {
    handlePlaceholder();
})

```

html:

```
<div class="placeholder">input here</div>
<div class="input" contenteditable="true"></div>

```

css: 

```
.input {
    width: 200px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    margin-top: 30px;
    border: 1px solid #999;
    position: relative;
    z-index: 1;
}
.placeholder {
    color: #cdcdcd;
    position: absolute;
    z-index: 0;
    top: 30px;
    line-height: 30px;
    padding-left: 10px;
}

```

when the keyup event trigger the handlePlaceholder function, it has 200ms delay, but the real html placeholder dose not.

**My question: is there another way to add placeholder for contentEditable element,or how to do it in this way without the delay?**

jsfiddle: <http://jsfiddle.net/zhouxiaoping/pkgzrb7w/3/>

200ms is not the excatly time ,just description