0

我已经在这个问题上工作了几个星期。我想要做的是有占位符来向用户显示他们可以在哪里输入。当他们输入时，我希望占位符消失，但当 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 来隐藏占位符，这显然不起作用。有人可以帮我吗？

我也完全愿意使用 vanilla JavaScript。

4

5 回答 5

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/

于 2013-11-06T19:07:51.457 回答
1

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

        .pageDesc:empty:after {content : "Write your description here.";}
于 2013-11-06T18:58:06.047 回答
1

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；

于 2013-11-06T18:59:58.167 回答
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/

于 2013-11-06T19:49:35.847 回答
0

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

于 2013-11-06T19:00:02.493 回答