Question

经过一个很好的回答后，我发现这可能是Placeholder in contenteditable - focus event issue

的重复

我有一个带有的HTML contenteditable="true"元素。我的目标是利用span元素建立一个无缝的“输入”字段。我在解决以下问题时遇到了问题：

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

有人能让这种魔力发生吗？我发布的Here is a fiddle。

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 Fiddle demo

为了使其更具可定制性，给定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 demo

参考文献：

兼容性：
- CSS generated content (::before/::after)。
- :empty (and other 'CSS 3' selectors)。
CSS：
- :empty。
- Generated content, automatic numbering and lists。

Answer 2

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

添加此css：

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

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

编辑2：也不是Chrome 38

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

2 个答案: