Question

我已经在这个问题上工作了几个星期。我想要做的是让占位符向用户显示他们可以键入的位置。当他们输入时，我希望占位符消失，但当div为空时再次出现。

我发现的每件事都与跨浏览器占位符支持输入和textareas有关，并试图将代码应用于我的问题导致失败。

我使用h1s作为标题和标准div进行描述。

我的代码如下所示：

HTML

<div class="page-desc" contenteditable="true" data-placeholder="Write your description here."></div>

的jQuery

var placeholder = '<span class="placeholder">Write your title here</span>';
$(this).html(placeholder);

我有更多的jQuery代码，但它很糟糕。我目前正在使用keyup隐藏占位符，这显然不起作用。有人可以帮助我吗？

我完全愿意使用vanilla JavaScript。

Answer 1

你可以这样：

$('#xdiv').html($('#xdiv').data('placeholder'));

$('#xdiv').keydown(function() {
    if ($(this).html() == $(this).data('placeholder')) {
        $('#xdiv').html('');
    }
})

$('#xdiv').keyup(function() {
    if ($(this).html() == '') {
        $('#xdiv').html($('#xdiv').data('placeholder'));
    }
})

最初它将DIV的HTML设置为占位符文本。然后，当用户开始键入（在keydown上）时，它会检查DIV是否仍然具有占位符文本，如果是，则将其删除。由于用户可以删除所有数据 - 它会检查（在密钥上）DIV是否为空，如果是，则恢复占位符的文本。

演示：http://jsfiddle.net/bP7RF/

Answer 2

有一种方法可以在css中执行此操作（仅限现代浏览器）

        .pageDesc:empty:after {content : "Write your description here.";}

Answer 3

Javascript解决方案（不是很漂亮，但更多跨浏览器）：

$("#in").keyup(function(){
    if(!$(this).html()){
        $(this).html($(this).attr('data-placeholder'));
        $(this).attr('showing-placeholder',true);
    }
});
$("#in").keydown(function(){
    if($(this).attr('showing-placeholder')){
        $(this).html('');
        $(this).attr('showing-placeholder','');
    }
});

工作示例：JSFiddle;

Answer 4

为什么不使用jQuery中的Blur和Focus事件处理程序并检查Div的Text值？

快速查看代码：

$('[contenteditable="true"]').blur(function() {
    var text = $.trim($(this).text());
    var ph = $('<span/>',{ 'class':"placeholder"})
        .text($(this).data('placeholder')||'');
    if (text == '') {
        $(this).html(ph);
    }
}).focus(function() {
    if ($(this).children('.placeholder').length > 0) {
        $(this).html('<span>&nbsp;</span>');
    }
});

小提琴，例如：http://jsfiddle.net/qvvVr/1/

Answer 5

为什么不能使用input元素的占位符属性。它似乎完全符合您的要求而且得到了很好的支持（http://caniuse.com/input-placeholder）。对不起，如果我错过了什么。

占位符有div，而不是输入/ textareas

5 个答案: