Question

I have a div that I’m turning into a jEditable control with code like this:

         $(".ed-fld").editable("/url",
            {
              placeholder: "(Edit)", 
              tooltip: "Click to edit", 
              indicator: "Saving. . ."
            } 
         );

It works fine.

Now, I would like to add an effect such that when the control is displaying the placeholder text it displays in a grey color. When the control contains actual text, it should obey the regular styling.

Is this possible through jEditable?

Answer 1

The placeholder string is directly assigned to the element’s innerHTML, so you can include HTML tags in it with a class, e.g.

$('.ed-fld').editable('/url', {
    ...
    placeholder: '<span class="placeholder">(Edit)</span>'
});

Then you can style the placeholder class, e.g.

.placeholder { color: gray }

See it in action: http://jsfiddle.net/william/6VUHh/40/.