how to create a knockout hint text custom binding?

Question

Im trying to create a custom binding to show hint texts in text inputs.

so far I have this but it doesnt work:

ko.bindingHandlers.hintText= {
    init: function (element, valueAccessor) {
        element.focus(function () {
            if ($(this).val() === defaultText) {
                $(this).attr("value", "");
            }
        });
        element.blur(function () {
            if ($(this).val() === '') {
                $(this).val(valueAccessor());
            }
        });
    }
}

the html:

<input id="profileID" type="text" data-bind="hintText:'Enter Profile ID'" />

yes, like that, but I want to create a custom binding instead of using the place holder. — Farhad-Taran, Apr 29 '13 at 14:15
would the built-in `attr: {placeholder: myHintText}` binding work for you? — Joseph Gabriel, Apr 29 '13 at 14:18
Another similar: http://stackoverflow.com/questions/10934023/text-input-watermark-using-custom-bindinghandler. — Vladimir, Apr 29 '13 at 14:22

Joseph Gabriel · Accepted Answer · 2013-04-29T16:02:37.560

The HTML5 placeholder attribute should accomplish this for you.

If your browser requirements support the placeholder attribute, you can call it directly using the KnockOutJS' attr binding like this:

<input data-bind="attr:{placeholder: hintText}">

If you need support for older browser, there is a shim that should work for you: https://github.com/parndt/jquery-html5-placeholder-shim

In order to use this shim, you'd need to create custom binding so that you can manually call $.placeholder.shim(); as necessary when the placeholder changes.

Here's a "placeholder" binding that applies the shim (edited):

ko.bindingHandlers.placeholder = {
    init: function (element, valueAccessor) {
        var placeholderValue = valueAccessor();
        ko.applyBindingsToNode(element, { attr: { placeholder: placeholderValue} } );
    },
    update: function(element, valueAccessor){
        $.placeholder.shim();
    }
};

Your html would then look like this:

<input data-bind="placeholder: hintText">

how to create a knockout hint text custom binding?

1 Answers1