When a span element contains no text, fill with placeholder text

Question

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

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:

• 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 ..'

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

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>  

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.

Solution 1

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.

And to make it more customisable, given the data-* attributes in the 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>

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.

References:

• Compatibility:
  • CSS generated content (::before/::after).
  • :empty (and other 'CSS 3' selectors).
• CSS:
  • :empty.
  • Generated content, automatic numbering and lists.

Solution 2

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

Add this css:

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

Edit: I do not lose the ability to edit the element in FF 33

Edit 2: Nor in chrome 38