Placeholder

The placeholder binding will simply add placeholder attribute to element, and set it's value to observable. When setting placeholder attribute value, the binding handler will strip any HTML from value, so that the attribute will contain allowed value.

This binding handler can be safely used on elements not having placeholder attribute as it will add it if required.

Try to change text in first input or in HTML editable input, this will update placeholder too on empty HTML input element as well as on HTML editable input.

Please note, that to have placeholders on custom elements, extra CSS style need to be added:

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    display: block; /* For Firefox */
    color: #999;
}

Relevant code used in examples:

<style>
    [contenteditable=true]:empty:before {­
        content: attr(placeholder);
        display: block; /* For Firefox */
        color: #999;
    ­}
</style>
<div class="form-group" data-bind="with: binder.model.Text">
    <label>Placeholder value</label>
    <input data-bind="textInput: text" class="form-control">

    <label>HTML placeholder value</label>
    <div data-bind="htmlValue: text" class="form-control"></div>

    <label>Empty input with placeholder</label>
    <input data-bind="placeholder: text" class="form-control">

    <label>Empty HTML Editable input with placeholder</label>
    <div data-bind="htmlValue: '', placeholder: text" class="form-control"></div>

</div>

<script>
    window.onload = (function () {­
        binder.model.Text = new Maslosoft.Koe.HtmlValue({­text: 'This is <code>placeholder</code> <b>text</b>'­});
        ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
        jQuery('body').tooltip({­
            selector: '[rel~="tooltip"]'
        ­});
    ­});
</script>