当span元素不包含文本时,请使用占位符文本填充

Question

在得到一个很好的答案之后,我发现这可能是一个可能重复的占位符问题 - 焦点事件问题

我有一个HTML <span>元素contenteditable="true".我的目标是利用span元素建立一个无缝的"输入"字段.我在解决以下问题时遇到问题:

• 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');
    }
});

有人能让这种魔力发生吗？这是我发布的一个小提琴.

Answer 1

我建议您考虑使用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小提琴演示.

并且考虑data-*到HTML中的属性,使其更具可定制性:

<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小提琴演示.

参考文献:

• 兼容性:
  • CSS生成的内容(::before/ ::after).
  • :empty(和其他'CSS 3'选择器).
• CSS:
  • :empty.
  • 生成的内容,自动编号和列表.