带有 div 的占位符，而不是输入/文本区域答案

【问题标题】：Placeholders with divs, not inputs/textareas带有 div 的占位符，而不是输入/文本区域
【发布时间】：2013-11-18 04:05:50
【问题描述】：

我已经断断续续地解决这个问题了几个星期。我想要做的是有占位符来向用户显示他们可以在哪里输入。当他们输入时，我希望占位符消失，但当 div 为空时再次出现。

我发现的每一件事都与对输入和文本区域的跨浏览器占位符支持有关，并且尝试将它们的代码应用于我的问题会导致失败。

我使用 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 来隐藏占位符，这显然不起作用。有人可以帮帮我吗？

我也完全愿意使用原生 JavaScript。

【问题讨论】：

标签： javascript jquery placeholder

【解决方案1】：

为什么不使用 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/

【讨论】：

注意：我发现在某些浏览器中，仅清空 div 不会显示 I-bar，但放入 nbsp 会显示您正在编辑的位置。
哈哈，因为我不知道该怎么做！感谢您的代码，它看起来和工作都很棒。

【解决方案2】：

你可以有这样的东西：

$('#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 是否仍然具有占位符文本，如果是，则将其删除。而且由于用户可以删除所有数据 - 它会检查（在 keyup 上）DIV 是否为空，如果是 - 恢复占位符的文本。

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

【讨论】：

【解决方案3】：

为什么不能使用 input 元素的 placeholder 属性。它似乎完全符合您的要求，并且得到了很好的支持 (http://caniuse.com/input-placeholder)。抱歉，如果我遗漏了什么。

【讨论】：

我在他的 html 中没有看到输入

【解决方案4】：

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;

【讨论】：

【解决方案5】：

有一种方法可以在 css 中实现（仅限现代浏览器）

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

【讨论】：

如果人们禁用了 js，这将非常有用。我会将它包含在我的代码中！