Placeholders with divs, not inputs/textareas

Question

I have working on this problem for a couple weeks off and on. What I am trying to do is have placeholders to show users where they can type. When they do type, I want the placeholder to disappear, but reappear again when the div is empty.

Every thing I have found has to do with cross-browser placeholder support for inputs and textareas, and trying to apply the code for them to my issue results in failure.

I am using h1s for titles and standard divs for descriptions.

My code looks like this:

HTML

<div class="page-desc" contenteditable="true" data-placeholder="Write your description here."></div>

jQuery

var placeholder = '<span class="placeholder">Write your title here</span>';
$(this).html(placeholder);

I have more jQuery code, but it sucks. I am currently using keyup to hide the placeholder, and that's obviously not working. Can someone help me out?

I am totally open to using vanilla JavaScript as well.

Answer 1

You can have something like this:

$('#xdiv').html($('#xdiv').data('placeholder'));

$('#xdiv').keydown(function() {
    if ($(this).html() == $(this).data('placeholder')) {
        $('#xdiv').html('');
    }
})

$('#xdiv').keyup(function() {
    if ($(this).html() == '') {
        $('#xdiv').html($('#xdiv').data('placeholder'));
    }
})

Initially it sets DIV's HTML to placeholder text. Then when user begins to type (on keydown) it checks if DIV still has the placeholder text and if so - removes it. And since user can delete all the data - it checks (on keyup) if DIV is empty, and if so - restores placeholder's text.

Demo: http://jsfiddle.net/bP7RF/

Answer 2

there's a way to do it in css (modern browser only)

        .pageDesc:empty:after {content : "Write your description here.";} 

Answer 3

Javascript solution (not as pretty, but more cross-browser):

$("#in").keyup(function(){
    if(!$(this).html()){
        $(this).html($(this).attr('data-placeholder'));
        $(this).attr('showing-placeholder',true);
    }
});
$("#in").keydown(function(){
    if($(this).attr('showing-placeholder')){
        $(this).html('');
        $(this).attr('showing-placeholder','');
    }
});

Working Example: JSFiddle;

Answer 4

Why not use the Blur and Focus event handlers from jQuery and check the Text value of the Div?

Code for quick look:

$('[contenteditable="true"]').blur(function() {
    var text = $.trim($(this).text());
    var ph = $('<span/>',{ 'class':"placeholder"})
        .text($(this).data('placeholder')||'');
    if (text == '') {
        $(this).html(ph);
    }
}).focus(function() {
    if ($(this).children('.placeholder').length > 0) {
        $(this).html('<span>&nbsp;</span>');
    }
});

Fiddle for example: http://jsfiddle.net/qvvVr/1/

Answer 5

Why can't you use the placeholder attribute of the input element. It seems to do exactly what you want and it's very well supported (http://caniuse.com/input-placeholder). Sorry if I have missed something.