ko-placeholder.js

(function(ko, $) {
    var isInputSupported = 'placeholder' in document.createElement('input'),
        isTextareaSupported = 'placeholder' in document.createElement('textarea'),
        unwrap = ko.utils.unwrapObservable;

    if (isInputSupported && isTextareaSupported) {
        return;
    }

    if (!$.fn.placeholder) {
        return;
    }
    //return;
    ko.bindingHandlers.attr = (function(original) {
        return {
            init: original.init,
            update: function (el, valueAccessor) {
                var attr = unwrap(valueAccessor()) || {},
                    $el = $(el);
                
                if (attr.placeholder === undefined || unwrap(attr.placeholder) === $el.attr("placeholder")) { 
                    // bail. nothing special needs to happen.
                    return original.update.call(this, el, valueAccessor);
                }

                if (el.value !== $el.val()) {
                    el.value = $el.val();
                }
                $el
                    .off(".placeholder")
                    .removeClass("placeholder")
                    .data('placeholder-enabled', false);
                    
                original.update.call(this, el, valueAccessor);
                
                $el.placeholder();
            }
        };
    }(ko.bindingHandlers.attr));

    ko.bindingHandlers.value = (function (original) {
        return {
            init: function(el, valueAccessor, allBindingsAccessor) {
                var $el = $(el);
                
                if (!$el.data("placeholder-enabled") && $el.attr("placeholder") !== undefined && !$el.hasClass("no-jq-placeholder")) {
                    $el.placeholder();
                }

                return original.init.call(this, el, valueAccessor, allBindingsAccessor);
            },
            //init: original.init,
            update: function (element, valueAccessor) {
                var $el = $(element),
                    isPlaceholder = !!$el.data('placeholder-enabled');
                if (!isPlaceholder) {
                    return original.update.call(this, element, valueAccessor);
                }
                var newValue = unwrap(valueAccessor()),
                    elementValue = $el.val(),
                    newValueIsPlaceholder = ($el.attr("placeholder") === newValue),
                    valueHasChanged = (newValue !== elementValue) && !newValueIsPlaceholder;
                    //var noRecursion = element['__pl_norecursion'];
                
                if (newValueIsPlaceholder) {
                    //element['__pl_norecursion'] = true;
                    //console.log("value is placeholder: " + newValue);
                    valueAccessor()("");
                    
                }
                if (valueHasChanged) {
                    $el.val(newValue); 
                }
                
            }
        };
        
    }(ko.bindingHandlers.value));
}(ko, $));