当一个span元素不包含任何文本时，填充占位文本。

Question

当一个span元素不包含任何文本时，填充占位文本。

jquerycssinput

9

在看到一个很好的答案之后，我发现这可能是内容可编辑占位符问题的重复。

我有一个HTML 元素，并将contenteditable="true"。我的目标是利用元素创建无缝“输入”字段。但是我在以下流程中遇到了问题：

DOM加载时，可编辑，默认文本为'创建新标签..'。
用户单击时，文本更新为'开始输入..'。
在第一次按键时，删除的文本并以用户输入填充。
如果没有文本且用户仍在编辑，则用“开始输入..”替换文本。
如果没有文本且用户不在交互，则用“创建新标签..”替换文本。

它可以工作，除了当用户编辑元素并清除所有文本时，该元素会崩溃并变得无法编辑。我需要确保内始终有文本，或者我需要找到另一种处理这些情况的方法。

这是我正在使用的元素：
*注意：我正在使用jQuery，Bootstrap和FontAwesome

<span class="badge"><span contenteditable="true" id="new-tag" class="badge alert-info">Make a new tag ..</span><i class="fa fa-lg fa-plus-circle"></i></span>

我的JavaScript代码：

$('#new-tag').click(function(){
    if( $(this).data('editing') !== 'active'){
        $(this).text('Start typing ..');
    }
});

// i do it this way because when .text('') is used, the <span> breaks
$('#new-tag').keydown(function(e){
    if( $(this).data('editing') !== 'active'){
        $(this).text(String.fromCharCode(e.charCode));
    }
    $(this).data('editing','active');
});

$('#new-tag').change(function(){
    if( $(this).data('editing') == 'active' && $(this).text() == ''){
        $(this).text('Make a new tag ..');
        $(this).removeData('editing');
    }
});

有人可以实现这个魔法吗？这里是我发布的一个fiddle。

- Qwiso

2个回答

2

请添加以下CSS代码：

http://jsfiddle.net/rwmoehsc/2/

#new-tag {
   min-width: 150px;
   display: block;
   min-height: 20px;
}

编辑：我在Firefox 33中没有失去编辑元素的能力。

编辑2：在Chrome 38中也是如此。

- C Bauer

如果您在Chrome中编辑元素并按下Ctrl+A和Backspace以清除所有内容，则该元素会折叠并变为不活动状态。您是否也遇到了同样的情况？ - Qwiso

哦，有趣。是的，我只是点击它并输入，这不会导致这种行为。 - C Bauer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

我建议您考虑使用CSS：

span.badge[contenteditable] {
    display: inline-block;
}
span.badge[contenteditable]:empty::before {
    content: 'Make a new tag';
    display: inline-block;
}
span.badge[contenteditable]:empty:focus::before {
    content: 'Start typing';
}

JS Fiddle演示。

为了使其更加可定制，HTML中给出了data-*属性：

<span class="badge">
    <span contenteditable="true" id="new-tag" class="badge alert-info" data-placeholder="Make a new tag" data-focused-advice="Start typing"></span><i class="fa fa-lg fa-plus-circle"></i>
</span>

以下CSS将使用这些自定义属性来放置相应的文本：

span.badge[contenteditable] {
    display: inline-block;
}
span.badge[contenteditable]:empty::before {
    content: attr(data-placeholder);
    display: inline-block;
}
span.badge[contenteditable]:empty:focus::before {
    content: attr(data-focused-advice);
}

JS Fiddle演示。

参考文献:

兼容性:
- CSS生成内容（::before/::after）。
- :empty（以及其他“CSS 3”选择器）。
CSS:
- :empty。
- 生成的内容、自动编号和列表。