1

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'" />
4

1 回答 1

6

HTML5placeholder属性应该为您完成此操作。

如果您的浏览器要求支持该placeholder属性，您可以使用 KnockOutJS 的attr绑定直接调用它，如下所示：

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

如果您需要对旧版浏览器的支持，有一个适合您的 shim： https ://github.com/parndt/jquery-html5-placeholder-shim

为了使用这个 shim，您需要创建自定义绑定，以便$.placeholder.shim();在占位符更改时可以根据需要手动调用。

这是一个应用 shim 的“占位符”绑定（已编辑）：

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

然后，您的 html 将如下所示：

<input data-bind="placeholder: hintText">
于 2013-04-29T14:44:44.523 回答