当span元素不包含文本时，请填充占位符文本 [英] When a span element contains no text, fill with placeholder text

问题描述

经过一个很好的回答后，我发现这可能是 contentholder在contenteditable中的重复 - 焦点事件问题

After a great answer I see this might be a possible duplicate of Placeholder in contenteditable - focus event issue

我有一个HTML < span> c> contenteditable =true。我的目标是有一个无缝的输入字段利用跨度元素。我遇到问题，让以下流程工作：

I have an HTML <span> element with the contenteditable="true". My goal is to have a seamless 'input' field utilizing the span element. I'm having issues getting the following flow to work:

• DOM加载< span> code>修改新标签的可修改和默认文字


• 当用户点击< span> 文本更新为开始输入...


• 在第一次按键时，删除< span> 文本，用户输入


• 如果< span> 没有文本，并且用户仍在编辑，请将文本替换为 '


• 如果< span> 没有文本且用户未进行交互，请将文本替换为 。'

• The DOM loads with <span> editable and default text of 'Make a new tag ..'
• When User clicks on the <span> the text updates to say 'Begin typing ..'
• On first keypress, remove <span> text and begin filling with User input
• If the <span> has no text and the user is still editing, replace text with 'Begin typing ..'
• If the <span> has no text and the user is not interacting, replace text with 'Make a new tag ..'

它的工作原理除了当用户编辑元素并清除所有文本时，元素会折叠并变得不可编辑。我需要确保< span> 中总是有文本，或者我需要找到另一种处理这些情况的方法

It works except that when the User is editing the element and they clear all text, the element collapses and becomes uneditable. I need to make sure there is always text inside the <span> or I need to find another method of handling these cases

这是我使用的元素：

*注意：我使用jQuery，Bootstrap和FontAwesome

Here is the element I am working with:
*Note: I am using jQuery, Bootstrap, and 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：

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

有人可以让这个魔法发生吗？ 这是我发布的一个小提琴。

Can someone make this magic happen? Here is a fiddle of what I have posted.

推荐答案

我建议您考虑使用CSS：

I'd suggest that you could consider using 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 。

<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将使用这些自定义属性来放置相应的文本：

The following CSS will use those custom attributes to place the appropriate text:

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生成的内容（ :: before / :: after ）。
  
  
  • ：empty （和其他CSS 3 'selectors）。
  
  
  • Compatibility:
    • CSS generated content (::before/::after).
    • :empty (and other 'CSS 3' selectors).
    
    
    • ：空 。 / li>
      
    • 生成的内容，自动编号和列表 。
    
    
    • :empty.
    • Generated content, automatic numbering and lists.

    这篇关于当span元素不包含文本时，请填充占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！