Question

我有一个contentEditable元素，我通过javascript为它添加一个占位符，但它有200ms的延迟，这里是代码

的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;
}

当keyup事件触发handlePlaceholder函数时，它有200ms的延迟，但实际的html占位符没有。

我的问题：是否有其他方法可以为contentEditable元素添加占位符，或者如何在没有延迟的情况下以这种方式执行此操作？

jsfiddle：http://jsfiddle.net/zhouxiaoping/pkgzrb7w/3/

200ms不是令人兴奋的时间，只是描述

Answer 1

您可以在零超时时使用keydown事件和setTimeout来在默认事件处理程序之后立即触发该函数（因此输入值将在当时更新）

$('.input').on('focus blur keydown', function() {
    setTimeout(handlePlaceholder, 0);
})

http://jsfiddle.net/pkgzrb7w/6/

Answer 2

问题是您正在处理“keyup”事件。尝试使用keydown。

可编辑元素占位符不顺畅

2 个答案: