在看到一个很好的答案之后,我发现这可能是内容可编辑占位符问题的重复。
我有一个HTML <span>
元素,并将contenteditable="true"
。我的目标是利用元素创建无缝“输入”字段。但是我在以下流程中遇到了问题:
- DOM加载时,
<span>
可编辑,默认文本为'创建新标签..'。 - 用户单击
<span>
时,文本更新为'开始输入..'。 - 在第一次按键时,删除
<span>
的文本并以用户输入填充。 - 如果
<span>
没有文本且用户仍在编辑,则用“开始输入..”替换文本。 - 如果
<span>
没有文本且用户不在交互,则用“创建新标签..”替换文本。
它可以工作,除了当用户编辑元素并清除所有文本时,该元素会崩溃并变得无法编辑。我需要确保<span>
内始终有文本,或者我需要找到另一种处理这些情况的方法。
这是我正在使用的元素:
*注意:我正在使用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。
:empty
。此选择器要求没有元素、文本或空格。因此它无法匹配,因为您(出于某种原因)似乎已经在HTML中硬编码了'创建一个新标签'文本。您可以从CSS中删除:empty
选择器,或者您可以使用我在答案中展示的方法,该方法不需要或不希望在[contenteditable]
span中添加任何内容。 - David Thomas::before
的文本颜色,以模拟正常的占位符。 - Marco Bernardini